重新加载AngularJS控制器

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

无需重新加载控制器.Angular足够聪明,可以在$scope.isAuthenticated状态发生变化时更改模板.

我在你的代码中看到的一个问题是,一旦$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以向您展示一个工作示例时,我已经意识到指令的链接函数不会被多次调用,因此在此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>'
  }
});

而这里是工作示例