Angular ng-show не работает должным образом при изменении значения

Я пытаюсь показать div, зависит от разрешения пользователя входа в систему.

<div class="container">
    <p> {{permission}}</p>
    <div ng-show="permission" class="admin_panel">
      ....
    </div>
</div>

и в контроллере установлено:

$scope.init = function(){

    if($window.sessionStorage.isAdmin){
      $scope.permission = $window.sessionStorage.isAdmin;
    }
    $log.info("are you admin??? " + $scope.permission);
};
$scope.init();

В консоли я могу проверить, что для разрешения установлено значение false и {{permission}} также показано его значение ложно. Тем не менее, ng-show все еще отображается, хотя значение false. Я не уверен, что с этим не так.

Ответ 1

Вы пробовали ng-show="permission === true;"? ng-show, насколько я понимаю, предназначен для оценки того, что находится внутри кавычек. это просто прямо укажет на оценку. У меня были впечатления, когда просто наличие переменной внутри кавычек не является оценкой, которую ng-show распознает по какой-то нечетной причине.

Ответ 2

Если вы хотите показать или скрыть какой-либо контент, зависящий от прав пользователя, вместо использования "ng-show", вы должны использовать "ng-if".

ng-show/ng-hide только добавляет или удаляет класс CSS, который показывает или скрывает этот элемент (display: none), но пользователь может легко его изменить в браузере.

Использование ng-if: "Если выражение, назначенное ngIf, оценивается как ложное значение, тогда элемент удаляется из DOM, иначе клон элемента снова вводится в DOM."

https://docs.angularjs.org/api/ng/directive/ngIf

Ответ 3

У меня такая же проблема, и все отлично работает, кроме ng-show. Я пропустил что-то глупое. когда вы вызываете контроллер из разных частей документа, вы не можете обмениваться данными между ними. например, у меня есть 2 тега div

в документе

<div id="1" ng-controller="contentCtrl">
   <div ng-click="toggleSidebarShow()">
   <!-- some code here -->
   </div>
</div>

<div id="2" ng-controller="contentCtrl">
    <div ng-show="showSidebar">
    </div>
</div>

showSidebar между contentCtrl div 1 и div2 не был разделен.

в контроллере

// some code
    $scope.showSidebar = true;
    $scope.toggleSidebar = function (){
        $scope.showSidebar = ! $scope.showSidebar;
    };

но этот код не работает, потому что toggleSidebar вызывается за пределами тега div2 и имеет собственный showSidebar. Чтобы справиться с этой проблемой, вам пришлось использовать сервис или модули. см. эту ссылку на дополнительную информацию.

Ответ 4

У меня была аналогичная проблема, за исключением того, что моя переменная была изменена внутри функция тайм-аута:

<div ng-show="check"> something .... </div>    

setTimeout(function(){
   check = false;
   },500);

проблема была решена, когда я добавил $scope. $apply() внутри таймаута:

setTimeout(function(){
   check = false;
   $scope.$apply()
   },500);

Ответ 5

Еще одна вещь, которую нужно проверить, когда ваша страница загружается, в элементе проверки проверяет, находится ли элемент, который вы пытаетесь использовать ng-show, внутри элемента, который имеет директиву ng-controller.

Если ваш элемент с ng-show находится вне элемента ng-controller, то ng-show не работает