值更改时，Angular ng-show 无法正常工作答案

【问题标题】：Angular ng-show doesn't work properly when value changes值更改时，Angular ng-show 无法正常工作
【发布时间】：2014-12-06 21:46:37
【问题描述】：

我正在尝试显示 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 仍会显示。我不确定这有什么问题。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

你试过ng-show="permission === true;"吗？据我了解，ng-show 旨在评估引号内的任何内容。这只会明确说明评估。我有过这样的经历，即在引号内仅包含一个变量并不是ng-show 出于某种奇怪原因而认可的评估。

【讨论】：

啊我找到了原因.. 我认为 sessionStorage.admin 设置为布尔值，但它是字符串！！！！呃
ngShow 都不承认有一个简单的函数返回真/假。

【解决方案2】：

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

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

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

当我在 timeout 中添加 $scope.$apply() 时问题解决了：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

使用ng-if 并不比ng-show 更安全。用户可以更改display，但用户也可以手动插入 html 元素（书签、用户脚本或在控制台中输入）。 两种情况都必须在服务器端进行权限验证。

【解决方案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。要克服这个问题，您必须使用服务或模块。请参阅this 链接以获取更多信息。

【讨论】：

【解决方案5】：

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

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

【讨论】：