Javascript 值更改时，Angular ng-show 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27336930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular ng-show doesn't work properly when value changes
提问by REALFREE
I'm trying to show div depends on permission of log in user.
我试图显示 div 取决于登录用户的权限。
<div class="container">
<p> {{permission}}</p>
<div ng-show="permission" class="admin_panel">
....
</div>
</div>
and in controller, it is set:
在控制器中，它被设置为：
$scope.init = function(){
if($window.sessionStorage.isAdmin){
$scope.permission = $window.sessionStorage.isAdmin;
}
$log.info("are you admin??? " + $scope.permission);
};
$scope.init();
In console, I could verify that permission was set to false and {{permission}}also showed
its value is false. However, ng-show is still showing even though the value is false. I'm not sure what's wrong with this.
在控制台中，我可以验证权限设置为 false 并{{permission}}显示其值为 false。但是，即使值为 false，ng-show 仍会显示。我不确定这有什么问题。
采纳答案by justinpinili
Have you tried ng-show="permission === true;"? ng-show, to my understanding, is meant to evaluate whatever is inside the quotes. this would just explicitly state the evaluation. I've had experiences where just having a variable inside the quotes isn't an evaluation that ng-showrecognizes for some odd reason.
你试过ng-show="permission === true;"吗？ng-show，据我所知，是为了评估引号内的内容。这只会明确说明评估。我曾有过这样的经历：在引号中包含一个变量并不是ng-show出于某种奇怪原因而识别的评估。
回答by mohammad eslahi sani
I had a similar problem except that my variable was changed inside a timeout function like this:
我有一个类似的问题，只是我的变量在这样的超时函数中被改变了：
<div ng-show="check"> something .... </div>
setTimeout(function(){
check = false;
},500);
the problem was solved when i added $scope.$apply() inside timeout:
当我在超时内添加 $scope.$apply() 时，问题解决了：
setTimeout(function(){
check = false;
$scope.$apply()
},500);
回答by Fabricio Duarte
If you want to show or hide some content that depends of the user permissions, instead of using "ng-show", you should use "ng-if".
如果要显示或隐藏某些取决于用户权限的内容，则应使用“ng-if”而不是“ng-show”。
ng-show/ng-hide only adds or remove a CSS class that show or hide that element (display:none), but an user could change it easily in the browser.
ng-show/ng-hide 只添加或删除显示或隐藏该元素的 CSS 类 (display:none)，但用户可以在浏览器中轻松更改它。
Using ng-if: "If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM."
使用 ng-if：“如果分配给 ngIf 的表达式计算结果为假值，则该元素将从 DOM 中删除，否则该元素的克隆将重新插入到 DOM 中。”
回答by Esterlinkof
I have a same problem and every thing work fine except ng-show. I missed something stupid. when you call a controller from different part of your document you can not share data between them. for example i have 2 div tag
我有同样的问题，除了 ng-show 之外，一切正常。我错过了一些愚蠢的事情。当您从文档的不同部分调用控制器时，您无法在它们之间共享数据。例如我有 2 个 div 标签
in document
在文件中
<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 between contentCtrl of div 1 and div2 wasn't share.
div 1 和 div2 的 contentCtrl 之间的 showSidebar 未共享。
in controller
在控制器中
// some code
$scope.showSidebar = true;
$scope.toggleSidebar = function (){
$scope.showSidebar = ! $scope.showSidebar;
};
but this code doesn't work because toggleSidebar called outside of the div2 tag and have it's own showSidebar. To conquer this problem you had to use service or modules. see thislink to more information.
但是这段代码不起作用，因为toggleSidebar 在div2 标签之外调用并且有它自己的showSidebar。为了克服这个问题，你必须使用服务或模块。请参阅此链接以获取更多信息。
回答by Fakhar Ahmad Rasul
One more thing to check is when your page loads, in the inspect element check if the element you are trying to use ng-show on is rendered inside the element which has the ng-controller directive.
要检查的另一件事是当您的页面加载时，在检查元素中检查您尝试使用 ng-show 的元素是否呈现在具有 ng-controller 指令的元素内。
If your element with ng-show is outside the ng-controller element then ng-show wont work
如果带有 ng-show 的元素在 ng-controller 元素之外，则 ng-show 将不起作用
