重新加载AngularJS控制器

本文介绍了重新加载AngularJS控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是angularjs的新手.

I'm a newbie to angularjs.

我的问题是我有一个用于处理登录和注销的用户控制器.我还有另一个控制器可以为我的网站加载标题菜单.

My problem is that I have a User Controller for handling Login and Logout. I have also another controller to load a header menu for my site.

如果用户登录到站点，则我的isAuthenticated变量设置为true.如果将变量设置为true，则应更改标题，但是，我认为必须重新加载控制器才能更改标题视图.

If the user logs in to the site my isAuthenticated variable is set to true. If the variable is set to true the header should be change but, so I think the controller must be reloaded to change the header view.

这是我的HeaderController的代码:

Here the code of my HeaderController:

myapp.controller('HeaderController', ['$scope', '$location', '$window', 'AuthenticationService', function HeaderController($scope, $location, $window, AuthenticationService) { $scope.isAuthenticated = AuthenticationService.isAuthenticated; if (AuthenticationService.isAuthenticated) { $scope.user.vorname = $window.sessionStorage.user.vorname; } } ]);

这是我的HeaderDirective的代码:

Here's the code of my HeaderDirective:

myapp.directive('appHeader', function() { return { restrict: 'E', link: function(scope, element, attrs) { if (attrs.isauthenticated == 'false') { scope.headerUrl = 'views/header/index.html'; } else { scope.headerUrl = 'views/header/isAuthenticated.html'; } }, template: '<div ng-include="headerUrl"></div>' } });

我的index.html:

My index.html:

<div ng-controller="HeaderController"> <app-header isauthenticated="{{isAuthenticated}}"></app-header> </div>

如果用户登录到页面，如何重新加载控制器?

PS:请原谅我的发音不好.

PS: Please excuse my poor pronunciation.

推荐答案

无需重新加载控制器.当$scope.isAuthenticated状态更改时，Angular足够聪明，可以更改模板.

There's no need to reload your controller. Angular is smart enough to change the template when the $scope.isAuthenticated state changes.

我在您的代码中看到的一个问题是，一旦定义了$scope.isAuthenticated，它将不再更改.我想您要在用户登录时设置AuthenticationService.isAuthenticated = true，但是该更改不会传播到$scope.isAuthenticated属性，因为在JavaScript中，标量值是按值复制的，而不是按引用复制的.

One problem I see in your code is that once the $scope.isAuthenticated is defined it does not change anymore. I suppose you are setting AuthenticationService.isAuthenticated = true when user logs in but that change aren't being propagated to the $scope.isAuthenticated property because in JavaScript scalar values are copied by value instead of by reference.

有很多方法，例如将AuthenticationService.isAuthenticated属性从布尔值更改为函数:

There are many approaches, such as changing the AuthenticationService.isAuthenticated property from a boolean to a function:

angular.module('auth', []) .factory('AuthenticationService', function () { // private state var isAuthenticated = false; // getter and setter var auth = function (state) { if (typeof state !== 'undefined') { isAuthenticated = state; } return isAuthenticated; }; // expose getter-setter return { isAuthenticated: auth }; });

然后将该函数分配给$ scope:

Then assign that function to the $scope:

$scope.isAuthenticated = AuthenticationService.isAuthenticated;

然后在模板中使用该功能(不要忘记括号)

Then use the function in your template (don't forget the parens)

<app-header isauthenticated="{{ isAuthenticated() }}"></app-header>

在编写示例给您看一个工作示例时，我意识到指令的链接函数不会被多次调用，因此在此stackoverflow线程我刚刚修改了指令以观察isauthenticated属性的更改:

While writing a plunk to show you a working example I have realized that the link function of the directive is not called more than once, so as exposed in this stackoverflow thread I just modified the directive to observe changes in the isauthenticated attribute:

angular.module('directives', []) .directive('appHeader', function() { var bool = { 'true': true, 'false': false }; return { restrict: 'E', link: function (scope, element, attrs) { attrs.$observe('isauthenticated', function (newValue, oldValue) { if (bool[newValue]) { scope.headerUrl = 'authenticated.html'; } else { scope.headerUrl = 'not-authenticated.html'; } }); }, template: '<div ng-include="headerUrl"></div>' } });

这是工作示例