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

Question

我在 AngularJS 中使用 Ionic Framework，在这一点上我还是个新手。我的所有状态都在工作，除了一个，我找不到问题所在。我可以说我的第二个斜线导航不起作用。我无法导航到 link ("#/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>

我再次强制将项目导航到 link。

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

Answer 1

有 a wroking plunker，即使这个 link 也在工作

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

重点是 - 我们需要一个目标来实现我们的超级 child 状态。

表示其parent视图模板Url：'templates/restaurant-menu.html' - 必须包含ui-view=""

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

然后我们的超级 child 状态几乎不需要调整。 Url继承自parent，所以只需要添加最后一部分。此外，因为我们的 parent 已命名目标 child-view - 我们应该将其用作视图名称：

  .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

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

此解决方案a forked version

摘要：Child 个州正在使用相对名称来瞄准 parent。 Child 状态继承 url 部分。 What Do Child States Inherit From Parent States?

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

AngularJS doesn't routes second slash. How can i do that?

routes

angularjs

angular-ui-router

ionic-framework

ionic

View Names - Relative vs. Absolute Names