当值更改时，角度ng-show无法正常工作

Angular ng-show doesn't work properly when value changes

本文关键字：常工作 工作 ng-show 角度      更新时间：2023-09-26

我试图显示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 仍然显示。我不确定这有什么问题。

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

我遇到了类似的问题，只是我的变量在内部发生了变化像这样的超时函数：

<div ng-show="check"> something .... </div>    
setTimeout(function(){
   check = false;
   },500);

当我在超时中添加 $scope.$apply（） 时，问题已解决：

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

如果要显示或隐藏某些依赖于用户权限的内容，则应使用"ng-if"，而不是使用"ng-show"。

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

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

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

我有一个同样的问题，除了 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 和div 2 的 contentCtrl 之间的侧边栏未共享。

在控制器中

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

但是这段代码不起作用，因为切换侧边栏在div2 标签之外调用并且有自己的 showSidebar。为了克服这个问题，你必须使用服务或模块。有关详细信息，请参阅此链接。

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

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

相关文章：