離子框架問題中的ui-router

Question

我無法讓我的路線與我的觀點相匹配。 我有以下路線：

.state('tab.account', {
  url: '/account',
  abstract: true,
  views: {
    'tab-account': {
      templateUrl: 'templates/tab-account.html',
      controller: 'AccountController'
    }
  }
})
.state('tab.account.order', {
  url: '/order/:id', 
  views: {
    'order-view': {
      templateUrl: 'templates/order-view.html', 
      controller: 'OrderController'
    }
  }
})

我在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>

我在該視圖的控制器中有此功能：

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

最后我得到了這個訂單的觀點：

<ion-view ui-view="orderView" title="Order">
<ion-content class="has-header padding">
    <h1>Your Order</h1>
</ion-content>

網址似乎工作，我最終用＃/ tab / account / order / 1但它沒有加載最終視圖！

提前干杯！

Answer 1

ui-router配置將取決於您嘗試做什么。

看起來您希望帳戶視圖和訂單視圖位於不同的頁面上，在這種情況下，您不希望它是一個抽象狀態，因為從ui-router wiki ：“抽象狀態可以有子狀態但是不能自我激活。“抽象”狀態只是一種無法轉變的狀態。“

我不完全確定你出於同樣的原因甚至想要一個孩子狀態，因為“子狀態會將他們的模板加載到他們父母的ui視圖中。” （ https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#nested-states--views ）。

如果是這種情況，那么你可以這樣做：

.state('tab.account', {
  url: '/account',
  templateUrl: 'templates/tab-account.html',
  controller: 'AccountController'
})
.state('tab.order', {
  url: '/account/order/:id', 
  templateUrl: 'templates/order-view.html', 
  controller: 'OrderController'
})

這是一個傻瓜： http ：//plnkr.co/edit/uuEQcxbWchxQyGV7wMlw？p =preview

視圖對象已被刪除，因為除非您有多個嵌套視圖，否則您根本不需要它們。

但是，如果您想在同一頁面上查看訂單視圖，那么您可以執行以下操作： http ： //plnkr.co/edit/8Tb1uhVDM0HCW8cgPRfL？p = preview

<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>
    <ui-view></ui-view> <!-- Where the child view will load -->
  </ion-content>
</ion-view>

app.js：

.state('tab.account', {
  url: '/account',
  templateUrl: 'tab-account.html',
  controller: 'AccountController'
})
.state('tab.account.order', {
  url: '/order/:id', 
  templateUrl: 'order-view.html', 
  controller: 'OrderController'
})

您也可能想要從訂單視圖模板中刪除您的ion-content ，否則您可能會遇到一些時髦的雙滾動問題。

希望這可以幫助！ Ui-router非常令人困惑，但是他們的wiki有一些很棒的文檔和示例來清理它們。