Question

我正在使用ui-router构建一个带有嵌套视图的角度应用程序。该应用程序有一个帖子列表，每个帖子都有自己的Nav菜单来更改帖子的视图。

为简化上下文，我们只想说每个导航菜单都可以更改附加的帖子的主题。

               POST 1 CONTENT

[Light theme button]  [Dark theme button]

--------------------------------------------

               POST 2 CONTENT

[Light theme button]  [Dark theme button]

--------------------------------------------

                    *
                    *
                    *

我面临的问题是当我按下一个帖子导航菜单上的按钮时，所有帖子都会发生变化。我希望每个帖子的导航菜单只能影响其各自的帖子。

我是角色的初学者，我的问题是：

这是一个我想用ui-router解决的问题吗？（我想每个帖子都有一个路由器？）
如果是，我该如何解决？
如果没有，你能指出我正确的方向吗？

感谢任何帮助，无论是链接，解释，代码还是仅仅是评论。

PS。实际上，我不只是改变主题，我正在完全改变帖子上的内容。在未来，我想要实现的不仅仅是2个选项菜单选项。

这是我现在使用的代码（修改了一点以删除冗余）：

Main.js：

angular.module('app',['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/postlist');

        $stateProvider

        .state('postlist', {
            url: '/postlist',
            templateUrl: 'ListView.html',
            controller: ListCtrl
        })

        .state('postlist.light', {
            templateUrl: 'pollViewLight.html',
            controller: PollLightCtrl
        })

        .state('postlist.dark', {
            templateUrl: 'pollViewDark.html',
            controller: PollDarkCtrl
        })
    });

index.html的简化部分：

<nav>
    <ul>
        <li><a ui-sref="postlist">Post List</a></li>
    </ul>
</nav>

<div class="container">
    <div ui-view></div>
</div>

ListView.html：

<div class="row" ng-repeat="post in posts">
    <div class="col">
        <div ui-view></div>
        <ul class="nav nav-pills">
            <li><a ui-sref=".light">Light Theme</a></li>
            <li><a ui-sref=".dark">Dark Theme</a></li>
        </ul>
    </div>
</div>

多个嵌套视图与自己的路由器

0 个答案: