Question

当渲染index.html页面时，我的ApplicationController将被调用。当我登录（登录成功）时，我想刷新我的ApplicationController。怎么做？

我在我的应用程序中定义了以下控制器。

1）登录

   angular.module('aclf').controller('LoginController', LoginController);
    // The $inject property is an array of service names to inject.
    LoginController.$inject = [ '$location', 'AuthenticationService',
            'FlashService' ];
    function LoginController($location, AuthenticationService, FlashService) {
        var loginController = this;

        loginController.login = login;

        (function initController() {
            // reset login status
            AuthenticationService.ClearCredentials();
        })();

        function login() {
            loginController.dataLoading = true;
            AuthenticationService.Login(loginController.username,
                    loginController.password, function(response) {
                        if (response.username === loginController.username) {
                            console.log(response.authToken);
                            AuthenticationService.SetCurrentUser(
                                    loginController.username,
                                    response.authToken, true);
                            $location.path('/home');
                        } else {
                            FlashService.Error(response.message);
                            loginController.dataLoading = false;
                        }
                    });
        }
        ;
    }

2）ApplicationCotroller

angular.module('aclf').controller('ApplicationController',
            function($scope,$rootScope) {
                $scope.currentUser = $rootScope.globals.currentUser;
                console.log('Inside ApplicationController');
            })

3）HomeController-当渲染家庭控制器时我想刷新该部分，因为它包含currentUser。

/**
     * Home Controller
     */

    angular.module('aclf').controller('HomeController', HomeController);
    // The $inject property is an array of service names to inject.
    HomeController.$inject = [ 'UserService', '$rootScope' ];
    function HomeController(UserService, $rootScope) {
        var homeController = this;

        homeController.user = null;


        initController();

        function initController() {
            loadCurrentUser();

        }

        function loadCurrentUser() {
            UserService.GetByUsername($rootScope.globals.currentUser.username)
                    .then(function(user) {
                        homeController.user = user;
                    });
        }
    }

4）这是我的index.html页面这里我在body部分定义了我的ApplicationController。这需要至少在登录和注销后刷新

<body data-ng-controller="ApplicationController">


    <!-- TOPBAR START -->
    <div id="layout-topbar" data-ng-show="currentUser">
        <ul id="top-menu">
            <li>
                <span class="Fs22 FontRobotoLight">Welcome {{currentUser.username}} </span>
            </li>
            <li>
                <a href="#/login" class="btn btn-primary">Logout</a>
            </li>
        </ul>
    </div>
    <!-- TOPBAR END -->
    <div id="wrapper">
            <div id="wrapperIndent">

                <div id="layout-menu-cover" class="Animated05 ps-container">
                    <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
                        <div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
                    </div>
                    <div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
                        <div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
                    </div>
                </div>

                <div id="layout-portlets-cover">
                    <div class="Container96 Fnone MarAuto">

                        <div class="Container100">
                            <div class="ContainerIndent">
                                <div class="EmptyBox10"></div>
                                <div
                                        data-ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error' }"
                                        data-ng-if="flash" data-ng-bind="flash.message"></div>
                                <div data-ng-view></div>
                            </div>
                        </div>

                        <!-- footer -->
                        <div class="Container100">
                            <div class="ContainerIndent TexAlCenter Fs14">
                                Angular | All Rights Reserved.</div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
</body>

PS：我是AngularJS的新手

Answer 1

我尝试过重装页面的东西。但它没有用。

我删除了应用程序控制器并使用了

    $routeProvider.when('/home', {
                controller : 'HomeController',
                templateUrl : 'partials/home.html',
                controllerAs : 'homeController',
                leftNav : 'partials/left-nav-main.html',
                topNav: 'partials/top-nav.html'
    })

.when('/login', {
            controller : 'LoginController',
            templateUrl : 'partials/login.html',
            controllerAs : 'loginController'
        })

此处路由定义中的templateUrl属性引用在div元素的ng-view指令中加载的视图模板。我试图模拟类似于Angular左边的东西和顶部导航。 topNav属性的值用于使用ng-include指令在topnav div元素（“id = top-nav”）中加载顶部导航视图。我们也对左侧导航做同样的事情。如果当前路由配置未定义leftNav属性，则left-nav部分中的ng-if指令用于隐藏左侧导航。

此集成的最后一部分是设置currentRoute属性和将其绑定到ng-include。 Angular使用路由配置templateUrl属性设置ng-view模板，但它不知道或不关心我们添加的topNav和leftNav属性。我们需要编写一些自定义代码，将导航URL与相应的ng-includes指令绑定在一起。

$scope.$on('$routeChangeSuccess', function (e, current, previous) {
$scope.currentRoute = current;
});

这是我的index.html

<div class="navbar navbar-default navbar-fixed-top top-navbar">
<!--Existing html-->
<div id="top-nav-container" class="second-top-nav">
<div id="top-nav" ng-include="currentRoute.topNav"></div>
</div>
</div>
<div class="container-fluid">
<div id="content-container" class="row">
<div class="col-sm-2 left-nav-bar"
ng-if="currentRoute.leftNav">
<div id="left-nav" ng-include="currentRoute.leftNav"></div>
</div>
<div class="col-sm-10 col-sm-offset-2">
<div id="page-content" ng-view></div>
</div>
</div>
</div>

现在，左导航和上导航仅出现在主页中，并且不会出现在登录页面中。

Answer 2

嗯，我认为最佳做法是重新加载整个页面：

如果您使用angular-ui/ui-router

$state.reload();

如果您使用其他路由器

$route.reload();

AngularJS：如何刷新父控制器

2 个答案: