Question

我是angularjs的新手。

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

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

这是我的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的代码：

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：

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

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

PS：请原谅我的发音不好。

Answer 1

在用户通过身份验证后添加此代码：

// To refresh the page
$timeout(function () {
    // 0 ms delay to reload the page.
    $route.reload();
}, 0);

不要忘记在控制器中加入$timeout和$route。

myapp.controller('HeaderController', ['$scope', '$location', '$window', 'AuthenticationService', '$timeout', '$route',
function HeaderController($scope, $location, $window, AuthenticationService, $timeout, $route)

Answer 2

无需重新加载控制器。当$scope.isAuthenticated状态发生变化时，Angular足以智能地更改模板。

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

有很多方法，例如将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 };
});

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

$scope.isAuthenticated = AuthenticationService.isAuthenticated;

然后使用模板中的功能（不要忘记parens）

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

修改

在编写plunk以向您展示一个工作示例时，我已经意识到指令的链接功能不会被多次调用，因此在this stackoverflow thread中公开我刚刚修改了观察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>' } });

here is the working example

重新加载AngularJS控制器

2 个答案: