Question

我正在使用带有AngularJS的Ionic Framework，而且我现在非常新手。我的所有州都在工作，除了一个，我无法找到问题所在。我可以说我的第二个斜线导航无效。我无法导航到链接（＆＃34;＃/ tabs / dash / Restaurant / test / test2＆＃34;）

状态：

    .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（＆＃39; tab.restaurantmenu.food＆＃39; ）上遇到了问题。

控制器：

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

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

HTML :(我有模板/ 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：＆＃39; templates / restaurant-menu.html＆＃39; - 必须包含 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'
      },
    }
  })

关键是，我们希望定位州＆＃34; tab＆＃34;，因此视图目标的名称是视图名称和州名称＆＃39; viewName @ stateName＆＃39;。检查文档：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循viewname@statename方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

此解决方案有a forked version

摘要：子状态正在使用相对名称来定位父级。子州继承了网址部分。 What Do Child States Inherit From Parent States?

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

1 个答案:

View Names - Relative vs. Absolute Names