AngularJS ng-show verhält sich nicht wie erwartet

Question

Ich habe zwei divs, die ich anzeigen/ausblenden möchte, je nachdem, ob der Benutzer angemeldet ist. Ich weiß, dass der Benutzer angemeldet ist, abhängig davon, ob bestimmte Abfrageparameter beim Laden der Anwendung vorhanden sind. (Es ist erfunden und es ist für eine Demo) Also wenn Seite lädt, habe ich eine Var im Controller namens login, die ich auf false initialisieren.

Ich benutze $ scope.init, um Code nach dem Laden der Seite zu starten, um die Abfrageparameter zu testen und mein Login-Feld entsprechend zu setzen. Ich habe versucht ng-show="login" sowie ng-show="login == false/true". Es scheint nie zu zeigen oder zu verstecken .. es versteckt sich einfach immer. Was mache ich falsch?

<div class="pull-right" style="padding-top: 16px;"> 
     <a ng-show="login == false" ng-href="http://someSite/authorize">Login</a> 
    </div> 
    <div ng-show="login == true" class="pull-right" style="padding-top: 16px;"> 
     Welcome, {{fullName}} - <img width="40" height="50" ng-src="{{picture}}"/> 
    </div> 

Und in meinem Controller -

var app = angular.module('showtime', [], function($locationProvider) { 
     $locationProvider.html5Mode({enabled:true, requireBase: false}); 
    }); 

app.controller('showtimeController', function ($scope, $location, $http, $httpParamSerializer) { 

    $scope.login = false; 

    $scope.init = function() { 
     $scope.oauth.authuser = $location.search()['authuser']; 
     $scope.oauth.session_state = $location.search()['session_state']; 
     $scope.oauth.prompt = $location.search()['prompt']; 

     $scope.qs = $httpParamSerializer($scope.oauth); 

     // ... 

     if ($scope.oauth.state) { 
      console.log('returning from an access code flow with tokens and more'); 
      $http.get('http://someApi/code' + '?' $scope.qs).then(function (response) { 
       $scope.picture = response.data.picture; 
       $scope.login = true; 
      }); 
     } 
    }; 
}); 

Answer 1

Versuchen

login === true 

oder

<div ng-show="!!login" class="pull-right" style="padding-top: 16px;"> 

Sie können auch versuchen und drucken so viel wie möglich der Kürze halber weggelassen die Konsole und sehen, ob Login-Wert zeigt?

Answer 2

Sie können ng-Show und ng-hide zu erreichen dieses

<div class="pull-right" style="padding-top: 16px;"> 
    <a ng-hide="login" ng-href="http://someSite/authorize">Login</a> 
</div> 
<div ng-show="login" class="pull-right" style="padding-top: 16px;"> 
    Welcome, {{fullName}} - <img width="40" height="50" ng-src="{{picture}}"/> 
</div> 

Beide arbeiten gegenseitig nutzen. Da wir die gleiche Bedingung in ng-show und ng-hide verwendet haben, wird immer nur ein div angezeigt.

ng-show und ng-hide wird nur die Sichtbarkeit eines Elements festlegen. Wird niemals das Rendern von HTML-DOM-Elementen stoppen.