مشكلة جهاز التوجيه ui في الإطار الأيوني الذي يستدعي طرق العرض

Question

لدي تطبيق في الإطار الأيوني باستخدام مثال علامات التبويب في معظم الأحيان.ولكن في إحدى طرق العرض، أريد أن يكون المستخدم قادرًا على النقر فوق عنصر والانتقال إلى طريقة عرض أخرى بناءً على هذا العنصر.

ومع ذلك، عندما تنقر فوق عنصر ما، فإنه يقوم بتحميل العرض الصحيح، لكنه لا يستدعي ملف القالب الخاص بهذا العرض.

إليك ما لدي في جهاز التوجيه الخاص بي (لاحظ أنه تم استبعاد الأقسام غير ذات الصلة)

$stateProvider.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
}).state('tab.dash', {
  url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'LoginController'
    }
  }
}).state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    'tab-friends': {
      templateUrl: 'templates/friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
}).state('tab.buy', {
  url: '/buy',
  views: {
    'tab-buy': {
      templateUrl: 'templates/buy.html', 
      controller: 'PaymentController'
    }
  }
}).state('tab.account', {
  url: '/account',
  views: {
    'tab-account': {
      templateUrl: 'templates/tab-account.html',
      controller: 'AccountController'
    }
  }
}).state('tab.order', {
  url: '/account/order/:id', 
  views: {
    'tab-order': {
      templateUrl: 'templates/order-view.html', 
      controller: 'OrderController'
    }
  }
})

$urlRouterProvider.otherwise('/tab/dash');

في وحدة التحكم الخاصة بي لدي:

$scope.viewOrder = function(id) {   
    $state.go('tab.order', {id:id});
};

في templates/tab-account.html لدي:

<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>

<h2>Your orders</h2>

<div class="card" ng-repeat="booking in bookings">
  <div class="item item-text-wrap">
    <b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
  </div>
</div>

ثم يكون العرض الخاص بالعنصر كما يلي:

<ion-view title="Order">
  <ion-content class="has-header padding">
      <h1>Your Order</h1>
      <p>Test</p>
      Order #: {{orderNumber}}
  </ion-content>
</ion-view>

لا يظهر هذا العرض الأخير بشكل أساسي، على الرغم من تغيير عنوان url من tab/account ل /tab/account/order/1

لقد طرحت بعض الأسئلة المتعلقة بـ StackOverflow بخصوص الأيونية مؤخرًا، أعتذر إذا استمر الناس في مواجهتها واعتقدوا بحق أنني أحمق :/

شكرا لك مقدما!

Answer 1

أنت بحاجة إلى عرض واجهة المستخدم في العرض الأساسي الخاص بك.عندما تقوم بتداخل الحالات، يتم عرض العرض المتداخل داخل العرض الأساسي أينما كان لديك عنصر عرض واجهة المستخدم: <div ui-view></div>.