Question

您好，我不知道如何显示例如来自路线的导航栏和真实内容。我的stateProvider看起来像这样：

    .state('panel', {
        abstract: true,
        views: {
            // the child views will be defined here (absolutely named)
            'navbar': { templateUrl: 'packages/admin/app/partials/panel/navbar.html' }
        }
    })
    .state('panel.dashboard', {
        url: '/dashboard',
        templateUrl: 'packages/admin/app/partials/panel/index.html',
        controller: 'AdminCtrl'
    });

我的主HTML文件如下所示：

<body>
   <div ui-view="navbar"></div>
    <div class="container">
     <div ui-view></div>
   </div> <!-- /container -->

</body>

在路由 / dashboard 之后，我只看到在* ui-view =＆＃34; navbar＆＃34;中生成的 navbar.html 内容。但我从主 ui-view 中看不到 index.html＆＃39; 。如何管理？

Answer 1

我不确定为什么你会尝试使用multiple views，因为这似乎是普通嵌套视图的更好用法。我尝试在嵌套视图示例之后对代码进行建模：https://github.com/angular-ui/ui-router#nested-states--views

Answer 2

我建议您使用ui-view加载导航栏以使用ngInclude而不是您。

这样你可以使用导航栏的html并仍然使用ui-view加载其他部分。

您的主HTML代码如下所示：

<body>
   <div ng-include="packages/admin/app/partials/panel/navbar.html"></div>
    <div class="container">
     <div ui-view></div>
   </div> <!-- /container -->

</body>

您必须删除：

/* Take me out!
    .state('panel', {
            abstract: true,
            views: {
                // the child views will be defined here (absolutely named)
                'navbar': { templateUrl: 'packages/admin/app/partials/panel/navbar.html' }
            }
        })
*/

来自您的代码。

您仍然可以在控制器内动态设置导航栏的网址。

AngularJS嵌套视图

2 个答案: