Wie steuern Sie Element von einer anderen Seite, während Sie das Routing in AngularJS verwenden?

Question

Ich nehme ein Beispiel für ein einfaches Login-Formular. Im Folgenden finden Sie einige der Inhalte von index.html

<ul class="nav navbar-nav navbar-right navbar-static-top"> 
     <li><a href="#!signup"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li> 
     <li><a href="#!login"><span class="glyphicon glyphicon-log-in"></span> Log In</a></li> 

     <li><a href="#!login"><span class="glyphicon glyphicon-log-in"></span> Log out</a></li> 

    </ul> 

Dies sind die Controller die ich verwendet habe:

var app = angular 
.module('ModuleApp', ['ngRoute']) 
.config(function($routeProvider) { 
    $routeProvider 
     .when("/home", { 
      templateUrl: 'home.html', 
      controller: 'homeController' 
     }) 
     .when("/signup", { 
      templateUrl: 'signup.html', 
      controller: 'signupController' 
     }) 
     .when("/login", { 
      templateUrl: 'login.html', 
      controller: 'loginController' 
     }) 
     .when("/database", { 
      templateUrl: 'database.html', 
      controller: 'databaseController' 
     }) 
     ; 
}) 

Mein Ziel ist es, eine Login-Seite zu erstellen. Nachdem sich der Benutzer anmeldet, möchte ich die Ankerelemente "Sign up" und "Log In" ausblenden und es wird das "Abmelden" -Ankerelement angezeigt. So wird es von der Schaltfläche "Senden" auf der Anmeldeseite, z. B. "login.html" gesteuert.

Wie steuert man die Elemente von index.html von einer anderen Seite? Wie kann ich diesen "Login" -Button nach der Anmeldung ausblenden und deaktivieren, d. H. Mit einem Klick auf den Senden-Button?

Answer 1

Sie können dies erreichen, indem Sie einen globalen Status verwenden, der überprüft, ob der Benutzer bereits angemeldet ist.

Ich empfehle nicht, dass wegen des Sicherheitsproblems, aber Sie können dies tun:

<li ng-if="!logged"><a href="#!signup"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li> 
    <li ng-if="!logged"><a href="#!login"><span class="glyphicon glyphicon-log-in"></span> Log In</a></li> 
    <li ng-if="logged"><a href="#!login"><span class="glyphicon glyphicon-log-in"></span> Log out</a></li> 

In Ihrer Controller-Logik, wenn die Benutzerauthentifizierung Ihren logged Wert gemacht wird, ändern.

$rootScope.logged = true;