重新加载AngularJS控制器 [英] Reload AngularJS Controller

问题描述

我是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>

在编写示例给您看一个工作示例时，我意识到指令的链接函数不会被多次调用，因此在

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>'
  }
});

这是工作示例

这篇关于重新加载AngularJS控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！