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中設置User。 現在。 index.html頁面成功在ng-view呈現，但是我的導航欄保持不變（初始狀態，不顯示“管理員可見的鏈接”鏈接，也不顯示右側的下拉列表）。

Answer 1

去圖，剛找到一種方法可以做到這一點。 事實證明，您可以將$ rootScope對象傳遞給NavBarController並檢查一些事件，例如：

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

然后，每次路由更改時（例如，從登錄頁面到主頁），我都可以正確刷新控制器的$ scope。