AngularJS ng-show가 예상대로 작동하지 않습니다.

Question

사용자가 로그인했는지 여부에 따라 표시/숨기기를 원하는 두 div가 있습니다. 응용 프로그램이로드 될 때 특정 쿼리 매개 변수가 있는지 여부에 따라 사용자가 로그인되어 있습니다. (그것은 인위적이며 데모 용입니다.) 따라서 페이지가로드 될 때 login이라는 컨트롤러에 var가 있습니다.이 var는 false로 초기화됩니다.

페이지를로드 한 후 쿼리 매개 변수를 테스트하고 내 로그인 필드를 적절하게 설정하기 위해 $ scope.init을 사용하여 코드를 실행했습니다. 나는 과 ng-show="login == false/true"을 시도했습니다. 그것은 결코 보이거나 숨기는 것처럼 보이지 않습니다. 그것은 단지 숨어 있습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

<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> 

그리고 내 컨트롤러에서

은 -

login === true 

나 또한

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

당신이 시도하고 인쇄 할 수 있습니다 시도 간결

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

에 대해 가능한 한 많이 생략 콘솔에 로그인 값이 표시되는지 확인하십시오.

Answer 2

당신은 상호 의존적 작동이

<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> 

모두를 달성하기 위해 NG 쇼와 NG 숨기기를 사용할 수 있습니다. ng-show과 ng-hide 안에 동일한 조건을 사용 했으므로 한 번에 하나의 div 만 표시됩니다.

ng-show 및 ng-hide은 요소의 가시성 만 설정합니다. HTML DOM 요소의 렌더링을 중단하지 않습니다.