Angularjs-Menü login logout laden
Ich bin mit Angularjs in einem Projekt.
Login logout ich bin Einstellung einer scope-variable wie folgt:
$scope.showButton = MyAuthService.isAuthenticated();
Im markup sein, wie
<li ng-show="showLogout"><a href="#/logout" ng-click="logOut()">Logout</a></li>
Wenn ich logout Umleitung auf die login-Seite logout-Menü nicht verschwindet.
Habe auch versucht wie hier:
$scope.showButton = MyAuthService.isAuthenticated();
In markup:
<li ng-class=" showLogout ? 'showLogout' : 'hideLogOut' "><a href="#/logout" ng-click="logOut()">Logout</a></li>
Scheint der Umfang der Veränderung ist nicht zu reflektieren, in meiner Sicht, aber wenn ich Seite neu laden "logout Menü" verschwindet, wie erwartet.
Ich habe auch versucht, mit Richtlinien, wie unten:
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');
}
}
}
}
});
Kein Glück mit, dass zu.
Wie kann ich es ausblenden, wenn die Abmeldung erfolgreich ist und auch nach dem erfolgreichen login, wie kann ich zeigen "logout-button"?
Meinten Sie festlegen
Ich möchte sth wie ändern für $Umfang.isAuthenticated = true; ändere meine Ansicht sofort.
showButton
Funktion, vielleicht? Verwenden $scope.showButton = MyAuthService.isAuthenticated;
in JS und <foo ng-show="showLogout()">...</foo>
.Ich möchte sth wie ändern für $Umfang.isAuthenticated = true; ändere meine Ansicht sofort.
InformationsquelleAutor arnold | 2013-08-26
Du musst angemeldet sein, um einen Kommentar abzugeben.
Setup-eine Uhr, die auf MyAuthService.isAuthenticated (), und wenn das feuert, gesetzt Ihre scope-variable zu dem Ergebnis, dass der service-Aufruf. In Ihrem ersten Beispiel wird die scope-variable wird nur einmal eingestellt, wenn der controller initialisiert wird (ich nehme an, dass ist, wo es ausgeführt wird). Sie können die Uhr im controller, oder, wenn Sie möchten, verwenden Sie eine Richtlinie, in der Richtlinie-link-Funktion.
Etwas wie dieses:
$scope.$watch(MyAuthService.isAuthenticated, function(...) { ... });
können Sie geben plunker Beispiel arbeiten?
Sicher. Ich nahm Miguel plunkr und-Gabel-es - plnkr.co/Bearbeiten/KGUGCF?p=Album Vorhören
InformationsquelleAutor BoxerBucks
Edit: Nach Lesen der MarkRajcok Kommentar, den ich realisiert, dass diese Lösung ist die Kopplung Blick von business-Logik-Schicht, auch macht es die service-variable geändert werden, die außerhalb der service-Logik, das ist unerwünscht und fehleranfällig, so dass die $scope.$watch vorgeschlagenen Lösung durch BoxerBucks es ist wohl besser, sorry.
Können Sie die $scope.$beobachten Sie, wie in der BoxerBucks Antwort, aber ich denke, dass mit watchers ist nicht das richtige für die Leistungen, weil in der Regel sollten Sie auf die Dienste zugreifen Variablen in verschiedenen Controllern erwartet, dass, wenn Sie ändern, dass die Leistungen-Variablen, werden alle Controller, die injizieren, wird der Dienst automatisch aktualisiert, so glaube ich, dass dies ein guter Weg, um Ihr problem zu lösen:
In Ihrem MyAuthServices hierzu:
Dann in deinem controller machen:
schließlich in Ihrem html:
Sowie das funktionieren sollte, ohne einen watcher wie in BoxerBucks Antwort.
Überprüfen dieses ausgezeichnete video über AngularJS Anbieter, um zu verstehen, wie Dienstleistungen korrekt.
Ich bin schon die Verwendung von Diensten, wie Sie erwähnt, aber es funktioniert nicht(habe ich erwähnt, dass es meine Frage wie $scope.showButton = MyAuthService.isAuthenticated();) . Sind Sie sicher, dass der sudo-code, den Sie gab oben rechts?
obwohl es scheint mehr elegant, Paare dieser Ansatz die Sicht mit dem service. Eine Anzeige sollte nur wissen, über seine controller $scope Eigenschaften, nicht über service-Eigenschaften. Ich bevorzuge die $watch-Ansatz, die Sie in Ihrer Antwort.
Danke @MarkRajcok
überprüfen Sie diese plunk plnkr.co/Bearbeiten/r3K3Qs?p=Album Vorhören dies wurde von der AngularJS video, das ich erwähnt
InformationsquelleAutor Miguel A. Carrasco