Question

我在Angular.js中有一个由登录页面和另一个页面组成的项目。我有一个常用的导航栏，位于＆＃34; Layout＆＃34;之前，然后是ng-view div。这个导航栏依赖于一个控制器（让我们说是NavBarController），并且基于经过身份验证的用户，它会显示一些按钮。问题是，当用户登录时，下一页加载到ng-view，但NavVar控制器不知道这一点，所以它不会刷新它的$ scope，因此适当的按钮不会出现。

我想我的问题是：如何触发＆＃34;刷新＆＃34;基于另一个控制器功能的控制器上的动作。？这件事有可能吗？或者我是否必须在每个控制器的内部重复导航栏？

这是我的主要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);

}());

角度的初始化就像：

(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（）函数。它重定向到＆＃39; / index＆＃39;成功验证并在UserService中设置用户。现在。 index.html页面在ng-view中成功呈现，但我的导航栏保持不变（初始状态，没有显示管理员链接可见的链接，右边的下拉列表。

Answer 1

去图，找到了一种方法来做到这一点。事实证明，你可以将$ rootScope对象传递给NavBarController并检查一些事件，例如：

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

然后，每次路由更改时（例如，从登录页面更改为主页面），我都可以正确刷新控制器的$ scope。

angularjs中的基本控制器通信

1 个答案: