Question

这个让我难过。它上周工作，突然停止工作。我已经显示的元素是可见的，即使它评估为false。

在剧本中：

$scope.alerts = { message: '', success: false, error: false, notice: false };

在标记中：

<div class="alert success" ng-show="alerts.success">
    <strong>SUCCESS!</strong>
    <div>{{alerts.message}}</div>
</div>

出于测试目的，我在标记中放置了{{alerts.success}}以确保它确实评估为false，并且我可以确认它是。

知道为什么会这样吗？

ps：不幸的是，我不能发布比这更多的代码。

Answer 1

显然，这是版本1.2的已知问题（https://github.com/angular/angular.js/issues/4394）。我们上周在我们的项目中引入了ng-csp，并且它在ng-show / hide中表现不佳。我添加了https://groups.google.com/forum/#!topic/angular/w00KgEi1DLk下面的css片段，现在工作正常。谢谢你的回复！

@charset "UTF-8";

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
  display: none !important;
}

ng\:form {
  display: block;
}

Answer 2

您必须在回调函数中编写$scope.alerts.success = false;。是的，$ scope.alerts.success的值将变为false，因为它将在您的标记中的{{alerts.success}}中正确显示。

为了解决这个问题，你需要在变量赋值语句中包含$ scope。$ apply：

SomeService.DoSomething(function success() { /* Success Code */}, 
     function error() {
          $scope.$apply(function() {
              $scope.alerts.success = false;
          });
     })
);

Angular并不是完全自动的数据保护。是的，它确实更新了变量中的值，但它没有自动更新UI。当您更改回调内的值（包括setTimeout）时，必须使用$ scope。$ apply包装值赋值代码，以便Angular更新UI。

Answer 3

您的代码中必须发生其他事情。 ng-show能够检查对象属性。

这是一个工作的plunker。 http://plnkr.co/edit/QliAbg7zfkWgTVUTuLVp?p=preview

即使表达式的计算结果为false，ng-show元素也是可见的

3 个答案: