뷰를 호출하는 ionic 프레임워크의 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});
};

template/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

저는 최근 ionic에 관해 StackOverflow에 몇 가지 질문을 했습니다. 사람들이 계속해서 질문을 발견하고 제가 바보라고 생각한다면 사과드립니다.

미리 감사드립니다!

Answer 1

기본 보기에는 ui-view가 필요합니다.상태를 중첩하면 ui-view 요소가 있는 기본 뷰 내부에 중첩된 뷰가 표시됩니다. <div ui-view></div>.