Angularjs menu de connexion déconnexion de chargement
Je suis en utilisant Angularjs dans un projet.
Lors de la connexion, déconnexion, je suis à la définition d'une portée variable, comme ci-dessous:
$scope.showButton = MyAuthService.isAuthenticated();
Dans le balisage, l'un de ses semblables
<li ng-show="showLogout"><a href="#/logout" ng-click="logOut()">Logout</a></li>
Quand je déconnexion qu'il redirige vers la page de connexion mais le menu déconnexion ne disparaît pas.
Aussi essayé comme ceci:
$scope.showButton = MyAuthService.isAuthenticated();
Dans le balisage:
<li ng-class=" showLogout ? 'showLogout' : 'hideLogOut' "><a href="#/logout" ng-click="logOut()">Logout</a></li>
Semble portée changement ne reflète pas, à mon avis, mais quand je recharge la page "menu déconnexion" disparaît comme prévu.
J'ai aussi essayé avec les directives telles que ci-dessous:
MyApp.directive('logoutbutton', function(MyAuthService) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
attrs.$observe('logoutbutton', function() {
updateCSS();
});
function updateCSS() {
if (MyAuthService.isAuthorized()) {
element.css('display', 'inline');
} else {
element.css('display', 'none');
}
}
}
}
});
Pas de chance avec ça aussi.
Comment puis-je cacher lors de la déconnexion est réussie et aussi après la connexion réussie, comment puis-je montrer "bouton de déconnexion"?
- Vouliez-vous dire pour définir
showButton
à la fonction, peut-être? Utilisation$scope.showButton = MyAuthService.isAuthenticated;
en JS et<foo ng-show="showLogout()">...</foo>
. - Je veux qqch comme changement pour la somme de portée.isAuthenticated = true; va changer mon point de vue instantanément.
Vous devez vous connecter pour publier un commentaire.
Installation d'une montre sur MyAuthService.isAuthenticated() et lorsque que les incendies, définissez votre portée variable à la suite de l'appel de service. Dans ton premier exemple, la portée de la variable est uniquement prise en une seule fois lorsque le contrôleur est initialisé (je suppose que c'est là où il est en cours d'exécution). Vous pouvez régler la montre dans le contrôleur ou, si vous souhaitez utiliser une directive, la directive fonction de lien.
Quelque chose comme ceci:
$scope.$watch(MyAuthService.isAuthenticated, function(...) { ... });
Edit: Après avoir lu le MarkRajcok commentaire, j'ai réalisé que cette solution est le couplage de la vue à partir de la couche logique métier, aussi, il expose au service de la variable à être modifiés en dehors de la logique de service, ce n'est pas souhaitable et source d'erreurs, de sorte que le $scope.$regarder la solution proposée par BoxerBucks c'est probablement mieux, désolé.
Vous pouvez utiliser $scope.$regardez comme dans le BoxerBucks réponse, mais je pense qu'à l'aide d'observateurs n'est pas appropriée pour les services, parce que généralement vous voulez accéder à des services de variables dans les différents contrôleurs attend à ce que, lorsque vous modifiez que les services de variables, tous les contrôleurs injecter ce service sera mis à jour automatiquement, donc je crois que c'est une bonne façon de résoudre votre problème:
Dans votre MyAuthServices ce faire:
Puis dans votre contrôleur de cela:
enfin dans votre code html:
Et cela devrait fonctionner sans l'aide d'un observateur comme dans BoxerBucks réponse.
Vérifier cette excellente vidéo sur AngularJS fournisseurs, pour comprendre comment utiliser correctement les services.