Question

我正在尝试在我的项目中使用角度ui-router而我遇到了一个问题..

我希望拥有以下路线：/home，/home/:collection，/home/:collection/:item

所以这是我目前的代码：

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'IndexCtrl'
    })

    .state('home.collection', {
        url: '/:collection',
        templateUrl: 'views/home.collection.html',
        controller: 'CollectionCtrl'
    })

    .state('home.collection.item', {
        url: '/:item',
        templateUrl: 'views/home.item.html',
        controller: 'ItemCtrl'
    });

$urlRouterProvider.otherwise('/home');

有没有办法在ui-router中使用以下结构（这代表home视图）：

<div id="hero" class="container">
    <h1>Welcome, select an item below</h1>
</div>

<div id="collection-selector">
    <ul>
        <li ng-repeat="collection in collections">
            <a href="#/{{collection}}">{{collection}}</a>
        </li>
    </ul>
    <!-- collection view -->
    <div ui-view id="item-selector"></div>
</div>

<div id="item-details" ng-if="item.selected">
    <!-- item view -->
    <div ui-view></div>
</div>

所以第一个视图代表/home/:collection，然后如果用户导航到/home/collection/:item，那么我可以使用一些逻辑让项目详细信息窗格显示在它下面。我只是设法通过在item视图中嵌套collection视图来实现它，这显然是预期的行为，但我希望有一个解决方法可以解决这些问题，但是路由嵌套。

现在，如果我将我的收藏选择器放在ui-view内，那么它就不会在/home路线上显示选择器，这是一个问题。与集合选择器和详细视图相关联的样式非常不同并且断开连接，因此如果我可以避免它，我不希望嵌套它们。

我可能会对这个问题采取完全错误的方法，如果我是，请通知我。

Answer 1

啊，我找到了答案，如果您在路由器中使用views属性，您可以定位哪个视图将拾取视图...因为听到的声音...这里是代码：< / p>

.state('home', {
    url: '/home',
    templateUrl: 'views/home.html',
    controller: 'IndexCtrl'
})

.state('home.collection', {
    url: '/:collection',
    templateUrl: 'views/home.collection.html',
    controller: 'CollectionCtrl'
})

.state('home.collection.item', {
    url: '/:item',
    views: {
         "item@home" : {
            templateUrl: 'views/home.item.html',
            controller: 'ItemCtrl'
         }
     }
});

然后是另一个HTML，它将出现在views/home.html页面中：

<div ui-view="item" />

因此，当我导航至/home/:collection/:item时，item将出现在views/home.html

上的视图中

AngularJS：UI路由器嵌套了具有非嵌套视图的路由？

1 个答案: