AngularJS 不路由第二个斜线。我怎样才能做到这一点？

Question

我正在使用带有 AngularJS 的 Ionic 框架，此时我还是个新手。我所有的州都在工作，除了一个，我找不到问题所在。我可以说我的第二个斜线导航不起作用。我无法导航到链接（“#/tabs/dash/Restaurant/test/test2”）

州：

    .state('tab.dash', {
    url: '/dash',
    views: {
        'tab-dash': {
            templateUrl: 'templates/tab-dash.html',
            controller: 'DashCtrl'
        }
    }
})

.state('tab.restaurantlist', {
    url: '/dash/Restaurant',
    views: {
        'tab-dash': {
            templateUrl: 'templates/restaurant-list.html',
            controller: 'RestaurantListController'
        }
    }
})

.state('tab.restaurantmenu', {
    url: '/dash/Restaurant/:restaurantId',
    views: {
        'tab-dash': {
            templateUrl: 'templates/restaurant-menu.html',
            controller: 'RestaurantMenuController'
        }
    }
})

.state('tab.restaurantmenu.food', {
    url: '/dash/Restaurant/test/test2',
    views: {
        'tab-dash': {
            templateUrl: 'templates/restaurant-food.html',
            controller: 'RestaurantFoodController'
        }
    }
})

最后一个有问题[.state('tab.restaurantmenu.food']。

控制器：

.controller('RestaurantFoodController', function () {
console.log("RestaurantFoodController");
})

我只是想看看，它的工作原理。所以我清除了函数的输入。

HTML：（我有 templates/restaurant-food.html，但它来自 templates/restaurant-menu.html，你们可以看到导航）

<ion-view view-title="{{restaurant.name}}">
<ion-content>
    <ion-list>
        <ion-item class="item item-avatar item-icon-right" ng-repeat="item in restaurant.menu" href="#/tabs/dash/Restaurant/test/test2">
            <img src="../img/ionic.png" />
            <h2>{{item.FoodName}}</h2>
            <p>{{item.FoodDesc}}</p>
            <span class="price">{{item.price}}</span>
            <i class="icon ion-chevron-right icon-accessory"></i>
        </ion-item>
    </ion-list>
</ion-content>

我再次强制项目导航到链接。

我能做什么，我必须学习什么？如果你们知道我的问题，你能告诉我吗？

Answer 1

有a wroking plunker，连这个链接都可以工作

<a href="#/tabs/dash/Restaurant/test/test2">

关键是——我们需要一个超级子状态的目标。

这意味着它的父视图 templateUrl: 'templates/restaurant-menu.html' - 必须包含 ui-view=""

<div ui-view="child-view" >

然后我们的超级子状态需要很少的调整。 Url 是从父级继承的，因此只应添加最后一部分。此外，因为我们的父级已命名目标子视图 - 我们应该使用它作为视图名称：

  .state('tab.restaurantmenu.food', {
    //url: '/dash/Restaurant/test/test2',
    url: '/test2',
    views: {
      'tab-dash': {
      'child-view': {
        templateUrl: 'templates/restaurant-food.html',
        controller: 'RestaurantFoodController'
      },
    }
  })

查看here

如果我们希望将此状态的视图注入到 'tab-dash' 中，我们必须像这样调整：

  .state('tab.restaurantmenu.food', {
    url: '/test2',
    views: {
      //'child-view': {
      'tab-dash@tab': {
        templateUrl: 'templates/restaurant-food.html',
        controller: 'RestaurantFoodController'
      },
    }
  })

关键是，我们要定位状态“tab”，所以视图目标的名称是视图名称和状态名称“viewName@stateName”。检查文档：

View Names - Relative vs. Absolute Names

在幕后，每个视图都被分配了一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系方式。项目。您还可以选择以绝对语法编写视图名称。

这个解决方案有a forked version

总结：子状态使用相对名称来定位父状态。子状态继承 url 部分。 What Do Child States Inherit From Parent States?