Javascript 重新加载 AngularJS 控制器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26170625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload AngularJS Controller
提问by Rico Berger
I'm a newbie to angularjs.
我是 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.
我的问题是我有一个用于处理登录和注销的用户控制器。我还有另一个控制器来为我的网站加载标题菜单。
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.
如果用户登录到站点，我的 isAuthenticated 变量将设置为 true。如果变量设置为 true 标题应该更改但是，所以我认为必须重新加载控制器以更改标题视图。
Here the code of my HeaderController:
这里是我的 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;
}
}
]);
Here's the code of my HeaderDirective:
这是我的 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>'
}
});
My index.html:
我的 index.html：
<div ng-controller="HeaderController">
<app-header isauthenticated="{{isAuthenticated}}"></app-header>
</div>
How can I reload the controller if the user logs in to the page?
如果用户登录页面，如何重新加载控制器？
PS: Please excuse my poor pronunciation.
PS：请原谅我糟糕的发音。
采纳答案by Pau Fracés
There's no need to reload your controller. Angular is smart enough to change the template when the $scope.isAuthenticatedstate changes.
无需重新加载控制器。Angular 足够聪明，可以在$scope.isAuthenticated状态更改时更改模板。
One problem I see in your code is that once the $scope.isAuthenticatedis defined it does not change anymore. I suppose you are setting AuthenticationService.isAuthenticated = truewhen user logs in but that change aren't being propagated to the $scope.isAuthenticatedproperty because in JavaScript scalar values are copied by value instead of by reference.
我在您的代码中看到的一个问题是，一旦$scope.isAuthenticated定义了它就不再改变。我想您是AuthenticationService.isAuthenticated = true在用户登录时进行设置，但该更改不会传播到$scope.isAuthenticated属性，因为在 JavaScript 中，标量值是按值而不是按引用复制的。
There are many approaches, such as changing the AuthenticationService.isAuthenticatedproperty from a boolean to a function:
有很多方法，例如将AuthenticationService.isAuthenticated属性从布尔值更改为函数：
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 };
});
Then assign that function to the $scope:
然后将该函数分配给 $scope：
$scope.isAuthenticated = AuthenticationService.isAuthenticated;
Then use the function in your template (don't forget the parens)
然后使用模板中的函数（不要忘记括号）
<app-header isauthenticated="{{ isAuthenticated() }}"></app-header>
Edit:
编辑：
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 threadI just modified the directive to observe changes in the isauthenticatedattribute:
在编写一个 plunk 向您展示一个工作示例时，我意识到该指令的链接函数不会被多次调用，因此正如在此 stackoverflow 线程中公开的那样，我只是修改了该指令以观察isauthenticated属性的变化：
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>'
}
});
回答by mpatel
Add this piece of code after the user is authenticated:
在用户通过身份验证后添加这段代码：
// To refresh the page
$timeout(function () {
// 0 ms delay to reload the page.
$route.reload();
}, 0);
Don't forget to include $timeoutand $routein your controller.
不要忘记在您的控制器中包含$timeout和$route。
myapp.controller('HeaderController', ['$scope', '$location', '$window', 'AuthenticationService', '$timeout', '$route',
function HeaderController($scope, $location, $window, AuthenticationService, $timeout, $route)
