web-dev-qa-db-fra.com

Recharger AngularJS Controller

Je suis un débutant pour angularjs.

Mon problème est que j'ai un contrôleur utilisateur pour gérer la connexion et la déconnexion. J'ai également un autre contrôleur pour charger un menu d'en-tête pour mon site.

Si l'utilisateur se connecte au site, ma variable isAuthenticated est définie sur true. Si la variable est définie sur true, l'en-tête doit être modifié, mais je pense donc que le contrôleur doit être rechargé pour changer la vue de l'en-tête.

Voici le code de mon 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;
        }
    }
]);

Voici le code de mon 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>'
  }
});

Mon index.html:

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

Comment puis-je recharger le contrôleur si l'utilisateur se connecte à la page?

PS: Veuillez excuser ma mauvaise prononciation.

javascriptangularjscontroller
15
Rico Berger

Il n'est pas nécessaire de recharger votre contrôleur. Angular est assez intelligent pour changer le modèle lorsque le $scope.isAuthenticated changements d'état.

Un problème que je vois dans votre code est qu'une fois le $scope.isAuthenticated est défini, il ne change plus. Je suppose que vous définissez AuthenticationService.isAuthenticated = true lorsque l'utilisateur se connecte mais que cette modification n'est pas propagée au $scope.isAuthenticated propriété car en JavaScript les valeurs scalaires sont copiées par valeur plutôt que par référence.

Il existe de nombreuses approches, telles que la modification du AuthenticationService.isAuthenticated propriété d'un booléen à une fonction:

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

Attribuez ensuite cette fonction à la portée $:

$scope.isAuthenticated = AuthenticationService.isAuthenticated;

Utilisez ensuite la fonction dans votre modèle (n'oubliez pas les parens)

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

Modifier:

En écrivant un plunk pour vous montrer un exemple de travail, j'ai réalisé que la fonction de lien de la directive n'est pas appelée plus d'une fois , donc comme exposé dans - ce thread stackoverflow Je viens de modifier la directive pour observer les changements dans l'attribut 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>'
  }
});

Et voici l'exemple de travail

13
Pau Fracés

Ajoutez ce morceau de code après que l'utilisateur est authentifié:

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

N'oubliez pas d'inclure $timeout et $route dans votre manette.

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