问题 当值更改时,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}} 也表明 它的价值是假的。但是,即使值为false,ng-show仍然显示。我不确定这有什么问题。


5243
2017-12-06 21:46


起源



答案:


你有没有尝试过 ng-show="permission === true;"ng-show据我所知,是为了评估引号内的内容。这只会明确说明评估。我有过这样的经历,即在引号内部使用变量不是评估 ng-show 认识到一些奇怪的原因。


8
2017-12-06 21:53



啊我找到了原因..我认为sessionStorage.admin设置为布尔值,但它是字符串!!!!啊 - REALFREE
ngShow既不识别具有返回true / false的简单函数。 - Romain


答案:


你有没有尝试过 ng-show="permission === true;"ng-show据我所知,是为了评估引号内的内容。这只会明确说明评估。我有过这样的经历,即在引号内部使用变量不是评估 ng-show 认识到一些奇怪的原因。


8
2017-12-06 21:53



啊我找到了原因..我认为sessionStorage.admin设置为布尔值,但它是字符串!!!!啊 - REALFREE
ngShow既不识别具有返回true / false的简单函数。 - Romain


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

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

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

当我添加$ scope时,问题解决了。$ apply()在timeout内:

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

3
2017-10-18 09:54



这对我有用 - MareCieco


如果要显示或隐藏某些取决于用户权限的内容,而不是使用“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


2
2017-12-07 01:58



运用 ng-if 没有比这更安全了 ng-show。用户可能会改变 display,但用户也可以手动插入html元素(bookmarklet,用户脚本或在控制台中输入)。权限验证必须在服务器端完成 都 案件。 - tsh


我有同样的问题,除了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的contentCtrl和div2之间的showSidebar不是共享。

在控制器中

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

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


1
2017-08-20 02:47





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

如果你的ng-show元素在ng-controller元素之外,则ng-show将不起作用


0
2018-02-17 06:37