当值改变时，Angular ng-show 无法正常工作

Question

我试图显示 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}}

还显示 它的值是假的。然而，即使该值为 false，ng-show 仍然显示。我不确定这有什么问题。

Answer 1

你试过

ng-show="permission === true;"

吗？据我了解，

ng-show

旨在评估引号内的内容。这只是明确地说明评估。我有过这样的经历：由于某种奇怪的原因，仅仅在引号内包含一个变量并不是

ng-show

能够识别的评估。

Answer 2

我有一个类似的问题，除了我的变量在里面改变了 像这样的超时函数：

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

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

当我在超时内添加 $scope.$apply() 时，问题就解决了：

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

Answer 3

如果你想显示或隐藏一些取决于用户权限的内容，你应该使用“ng-if”而不是“ng-show”。

ng-show/ng-hide 仅添加或删除显示或隐藏该元素的 CSS 类（display:none），但用户可以在浏览器中轻松更改它。

使用 ng-if：“如果分配给 ngIf 的表达式计算结果为假值，则该元素将从 DOM 中删除，否则该元素的克隆将被重新插入到 DOM 中。”

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

Answer 4

我有同样的问题，除了 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>

div 1 和 div2 的 contentCtrl 之间的 showSidebar 未共享。

在控制器中

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

但是这个代码不起作用，因为toggleSidebar在div2标签之外调用并且有它自己的showSidebar。要解决这个问题，您必须使用服务或模块。请参阅此链接了解更多信息。

Answer 5

还要检查的另一件事是，当页面加载时，在检查元素中检查您尝试使用 ng-show 的元素是否在具有 ng-controller 指令的元素内呈现。

如果带有 ng-show 的元素位于 ng-controller 元素之外，那么 ng-show 将不起作用

Answer 6

我有时会遇到 ng-show/hide 问题...仍在 AngularJs v1.3.16 中

// this is not working sometimes
<td ng-hide="showrec == x.SeqNum>
 <a href="javascript:void(0)" ng-click="showrec = x.SeqNum; $apply()">xxx</a>
</td>

// but this version is
ng-click="showrecSeqNum(x)"

$scope.showrecSeqNum = function (x) {
  $scope.showrec = x.SeqNum;
//  $scope.$apply();
};