重新加載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

有沒有必要重新加載您的控制器。角度足夠聰明，可以在$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.isAuthenticated = AuthenticationService.isAuthenticated; 

然後在使用功能您的模板（不要忘記父母）

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

編輯：

雖然寫普拉克告訴你我已經意識到指令的鏈接功能不叫一次更多的工作示例，從而在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

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