Question

在我的 app.js 文件中，菜单有两种状态。父状态本质上是一个列表，而子状态是一个详细视图，在URL字符串中有一个ID参数。

.state('menu', {
    url: '/menu',
    views: {
       'menu': {
          templateUrl: 'views/menu.list.html',
          controller: 'MenuCtrl',
       }
    }
})
.state('menu.details', {
   url: '/details/:menuItemId',
   templateUrl: 'views/menu.details.html',
   controller: 'MenuDetailCtrl',
   resolve: {
      menuItemId: ['$stateParams', function($stateParams) {
         return $stateParams.menuItemId;
      }]
   }
});

在我的标记中，这是我必须触发状态更改的HTML：

<button class="button button-positive" ui-sref="menu.details({menuItemId: item.objectId})">
   Details, yo.
</button>

我遇到的问题是，当我点击按钮时，网址会按预期更改：

/＃/菜单/信息/ E0mW91ZuOp

但该页面未转换为 menu.details.html 模板。任何人都可以解释为什么会发生这种情况吗？

编辑：以下是父模板HTML

的完整内容

<ion-view title="Menu">
    <ion-content class="padding">
        <h2>{{pizze.name}}</h2>
        <ion-list ng-repeat="item in pizze.items">
            <ion-item>
                <span class="input-label">{{item.name}}</span>
                <button class="button button-positive" ui-sref="tabs.menu.details">
                    Details, yo.
                </button>
            </ion-item>
        </ion-list>    
    </ion-content>
</ion-view>

以下是儿童模板HTML

<ion-view title="Menu Details">
    <ion-content class="has-header padding">
        <h1>Such details. Wow.</h1>
    </ion-content>
</ion-view>

Answer 1

从我之前的评论：如果一条路线是另一条路线的孩子，它将继承该模板因此，要解决您的问题，您有两种选择：

在您的父模板中添加一个ui-view（或者离子视图，我不记得Ionic如何处理这个）：子模板将被加载到这个标签中

<强> parent.html

    <div>
       <h1>Your parent view</h1>
       <div ui-view></div>
    </div>

<强> child.html

    <div>
       <h1>Your child view</h1>
    </div>

改变子路线的状态，使其成为另一个路线的兄弟

<强> JS

   $stateProvider
      .state('menu', { /* your configuration */ })
      .state('menu-details', { /* your configuration */ });

查看有关如何处理嵌套视图的this example from Ionic。

ui-sref不会在参数化id的url中触发状态转换

1 个答案: