angular.js 中的基本控制器通信

Question

我在 Angular.js 中有一个项目，它由一个登录页面和另一个页面组成。我有一个位于“布局”中的通用导航栏，然后是 ng-view div。这个导航栏依赖于一个控制器（比方说 NavBarController），并且基于经过身份验证的用户，它会显示或不显示一些按钮。问题是当用户登录时，下一页会在 ng-view 上加载，但 NavVar 控制器不知道这一点，所以它不会刷新它的 $scope，因此不会显示正确的按钮。

我想我的问题是：如何根据另一个控制器的功能在一个控制器上触发“刷新”操作。 ?那件事可能吗？还是我必须在每个控制器的 html 中重复导航栏？

这是我的主要 html：

<div ng-app='theApp'>

    <div data-ng-controller="NavBarController">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand">The App</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active" ng-show="user.role == 'admin'"><a href="#">Link visible only by admin</a></li>
                        <li><a href="#">Link visible by all</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ user.name }} <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#" ng-click="LogOut()">Log out</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>


   <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js" />


    <script src="app/app.js"></script>
    <!-- controllers -->
    <script src="app/controllers/membershipController.js"></script>
    <script src="app/controllers/navBarController.js"></script>
    <!-- factories -->
    <script src="app/factories/membershipFactory.js"></script>
    <!-- services -->
    <script src="app/services/userService.js"></script>        
</div>

现在，NavBarController 类似于：

(function () {

    var NavBarController = function ($scope, UserService) {
        function init() {
            $scope.user = UserService.getUser();

            /* functions */
            $scope.LogOut = function () {
                UserService.clearUser();
            };
        }
        init();
    }

    NavBarController.$injenct = ['$scope', 'UserService'];
    angular.module("theApp").controller('NavBarController', NavBarController);

}());

angular的初始化是这样的：

(function() {

    var theApp = angular.module("theApp", ['ngRoute', 'ngCookies', 'ui.bootstrap']);        

    angular.module("theApp").config(function($routeProvider){
        $routeProvider
            .when('/', {
                controller: 'MembershipController',
                templateUrl: 'app/views/login.html'
            })
            .when('/index', {                
                templateUrl: 'app/views/index.html'
            })                
            .otherwise ( { redirectTo: '/' } );
    });         
}());

login.html 只是一个典型的登录密码页面，它会触发 MembershipController Authenticate() 函数。它在成功验证时重定向到“/index”，并在 UserService 中设置用户。现在。 index.html 页面在 ng-view 成功呈现，但我的导航栏保持不变（初始状态，不显示“管理员可见的链接”链接，也不显示右侧的下拉菜单。

Answer 1

去看看，刚刚找到了一种方法。原来你可以将 $rootScope 对象传递给 NavBarController 并检查一些事件，例如：

$rootScope.$on('$routeChangeSuccess', function () {
    $scope.user = UserService.getUser();
});

然后，每次路由发生变化（例如，从登录页面到主页面），我都可以正确刷新控制器的$scope。