AngularJS:状态更改后如何刷新页面上的所有可见控制器?- 登录后导航

Question

我设法通过使用指令navbar并将其包含在我的索引中来使其工作.html但是登录后，当我进行状态更改时，我的导航栏没有更新。如果我手动刷新页面，那么它会反映更改。

有没有更好的方法可以做到这一点？谢谢。

索引.html

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

导航栏.html

    <ul class="nav navbar-nav navbar-right">
      <li><a ui-sref="login" ng-hide="navbar.auth">Login</a></li>
      <li><a href="#" ng-click="navbar.Logout()" ng-show="navbar.auth">Logout</a></li>
    </ul>

Answer 1

我最终所做的不是对navbar使用指令，而只是对同一状态使用多个视图。这会自动在状态更改时重新加载所有视图。

索引.html

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

因此，登录后的第一页将导航栏作为第二个视图，使用与任何其他主状态相同的模板和控制器。

pivot.routes.js

routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
    $stateProvider
        .state('pivot', {
            url: '/pivot',
            views: {
                '': {
                    template: require('./pivot.html'),
                    controller: 'PivotController as pivot'
                },
                'nav': {
                    template: require('../nav/nav.html'),
                    controller: 'NavController as navbar'
                }
            }
        });
}

延伸阅读： https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views