Перезагрузите контроллер AngularJS

Я новичок в angularjs.

Моя проблема в том, что у меня есть User Controller для обработки входа и выхода из системы. У меня есть еще один контроллер для загрузки меню заголовка для моего сайта.

Если пользователь заходит на сайт, для моей переменной 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: Пожалуйста, извините мое плохое произношение.

Ответы

Ответ 1

Нет необходимости перезагружать контроллер. 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;

Затем используйте функцию в своем шаблоне (не забывайте о парнах)

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

Edit:

При написании plunk, чтобы показать вам рабочий пример, я понял, что ссылка на директиву не вызывается более одного раза, так как она отображается в fooobar.com/questions/413893/... Я только изменил директиву, чтобы наблюдать изменения в атрибуте 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>'
  }
});

И вот рабочий пример

Ответ 2

Добавьте этот фрагмент кода после аутентификации пользователя:

// 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)