AngularJS ng-show не работает как ожидалось

У меня есть два div, которые я хочу показать/скрыть на основании того, вошел ли пользователь в систему. Я знаю, что пользователь вошел в систему на основе того, существуют ли особые параметры запроса при загрузке приложения. (Это надуманно, и это для демонстрации). Поэтому, когда загружается страница, у меня есть var в контроллере с именем login, который я инициализирую на false.AngularJS ng-show не работает как ожидалось

Я использую $ scope.init для запуска некоторого кода после загрузки страницы, чтобы проверить параметры запроса и правильно установить поле для входа. Я пробовал ng-show="login", а также 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>

И в мой контроллер - опущена как можно больше для краткости

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; 
      }); 
     } 
    }; 
});

источник

2016-10-20 rogodeter

есть ли какое-либо поле с именем ng-model на вашей странице? –

вы положили 'ng-controller' в свою разметку? – ram1993

Используйте '===' для сравнения вместо '==' –

Попробуйте

login === true

или

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

Также вы можете попробовать и печать консоль и посмотреть, отображается ли значение входа?

источник

2016-10-20 05:16:15

Вы можете использовать нг-шоу и нг скрытие для достижения этой

<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-show и ng-hide, одновременно будет показан только один div.

ng-show и ng-hide установит только видимость элемента. Никогда не прекратит рендеринг элементов HTML DOM.

источник

2016-10-20 05:31:15 Nitheesh

Я действительно пробовал это, и он не работал. Ответ Нуру сработал. Может быть, это версия, или когда моя переменная $ scope задана/инициализирована? – rogodeter

AngularJS ng-show не работает как ожидалось

ответ

Смежные вопросы