如何在ui-路由器中包含不同的导航面板

Question

我的AngularJS应用程序有两个部分需要单独的导航栏：

• Patents

- `patent nav bar: list patents, add patents`

​

• Transactions

- `transaction nav bar: current transactions, transaction history`

​

我读过How to attach navbar only on certain pages using ui-router?，您可以在其中使用视图，但这包括状态中的templateUrl，在组件中声明了templateUrl，如下所示：

$stateProvider
.state('patents', {
   url: '/patents',
   component: 'patents',
})

angular.module('myApp').component('patents', {
    bindings: { patents: '<' },
    templateUrl: '../templates/patents/list/list-patents.htm'
});

问题

在ui-router中使用组件时，在模板/状态中包含不同导航的最佳方法是什么？如果答案是直截了当的，那就道歉。

Answer 1

方法1

通过模板中的ng-include：

<div ng-include="'link/to/template.html'"></div>

方法2

更动态地，您可以创建一个自定义<navigation>组件，它通过$stateParam设置正确的模板。

路由器：

.state('patents', {
    url         : '/patents',
    component   : 'patents',
    params      : {
        navigation  : 'custom'
    }
})

然后，在导航组件中，可以使用

template    : function($stateParams) {
    var navigation = $stateParam.navigation || 'default';
    return '<div ng-include="\''link/to/' + navigation + '.html'\'"></div>
},

因此，您只需在您的路由器中设置param时，该页面就有了自定义导航。

确保在每个页面中都包含<navigation>。

方法3

如果您不想在每个页面中包含<navigation>，您还可以创建一个单一导航菜单(就像现在可能有的那样)，并使用下面的方法添加一个控制器

app.controller('NavigationCtrl', function($rootScope, $state) {
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        this.navigation = toParams.navigation;
    });
})

您可以在每次路由更新时捕获toParams，并使用它动态更改模板：

导航模板：

<div class="nav" ng-controller="NavigationCtrl as $ctrl">

    <div ng-if="$ctrl.navigation === 'default'">
        // Include default
    </div>

    <div ng-if="$ctrl.navigation === 'custom'">
        // Include custom
    </div>

</div>