AngularJS Controller neu laden

Question

Ich bin ein Neuling zu angularjs.

Mein Problem ist, dass ich einen Benutzer-Controller für die Handhabung von Login und Logout habe. Ich habe auch einen anderen Controller, um ein Header-Menü für meine Website zu laden.

Wenn sich der Benutzer bei der Site anmeldet, wird meine isAuthenticated-Variable auf true festgelegt. Wenn die Variable auf "True" gesetzt ist, sollte der Header geändert werden, aber ich denke, dass der Controller neu geladen werden muss, um die Header-Ansicht zu ändern.

Hier ist der Code meiner 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; 
     } 
    } 
]); 

Hier ist der Code meiner 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>' 
    } 
}); 

Meine index.html:

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

Wie kann ich nachladen die Controller, wenn sich der Benutzer bei der Seite anmeldet?

PS: Bitte entschuldigen Sie meine schlechte Aussprache.

Answer 1

Sie brauchen Ihren Controller nicht neu zu laden. Angular ist intelligent genug, um die Vorlage zu ändern, wenn sich der Status $scope.isAuthenticated ändert.

Ein Problem, das ich in Ihrem Code sehe, ist, dass, sobald die $scope.isAuthenticated definiert ist, es nicht mehr ändert. Ich nehme an, Sie setzen AuthenticationService.isAuthenticated = true, wenn Benutzer sich anmeldet, aber diese Änderung wird nicht an die Eigenschaft $scope.isAuthenticated weitergegeben, da in JavaScript Skalarwerte nach Wert anstelle von Verweis kopiert werden.

Es gibt viele Ansätze, wie die AuthenticationService.isAuthenticated Eigenschaft von einem boolean auf eine Funktion zu ändern:

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

dann diese Funktion, um den $ Umfang zuweisen:

$scope.isAuthenticated = AuthenticationService.isAuthenticated; 

dann die Funktion in Ihre Vorlage (vergessen Sie nicht die Paren)

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

Edit:

Während ein zupfen Schreiben Sie ein funktionierendes Beispiel zu zeigen, dass ich erkannt haben, dass die Verbindungsfunktion der Richtlinie nicht mehr als einmal genannt wird, so ausgesetzt wie in this stackoverflow thread ich die Richtlinie nur modifizierte Änderungen zu beobachten im isauthenticated Attribut:

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

Und here is the working example

Answer 2

dieses Stück Code hinzufügen, nachdem der Benutzer authentifiziert wird:

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

nicht $timeout und $route in Ihrem Controller enthalten Vergessen.

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