为什么这个简单的AngularJS ng-show不工作？

我无法弄清楚为什么我的简单的AngularJS应用程序不按预期工作。 “Loading …”应该是隐藏的，“完成！” 应在1秒后显示。

HTML：

<div ng-app> <div ng-controller="TestCtrl"> <div class="text-center" ng-show="loading"> <h1>Loading...</h1> </div> <div class="text-center" ng-show="!loading"> <h1>Done!</h1> </div> </div> </div> 

使用Javascript：

 function TestCtrl($scope) { $scope.loading = true; setTimeout(function () { $scope.loading = false; }, 1000); } 

Answer 1

你需要告诉angular你更新了var：

 function TestCtrl($scope) { $scope.loading = true; setTimeout(function () { $scope.$apply(function(){ $scope.loading = false; }); }, 1000); } 

要不就

 function TestCtrl($scope, $timeout) { $scope.loading = true; $timeout(function () { $scope.loading = false; }, 1000); } 

Answer 2

更好的方法是调用$scope.$digest(); 更新你的用户界面

Answer 3

您需要使用$timeout并将其注入您的控制器中：

 function TestCtrl($scope, $timeout) { $scope.loading = true; $timeout(function () { $scope.loading = false; }, 1000); } 

小提琴演示

编辑：删除$scope.apply(); 正如@萨尔曼所build议的那样

Answer 4

你想使用apply()函数来停止加载消息。

检查这个演示jsFiddle **。

JavaScript的：

 function TestCtrl($scope) { $scope.loading = true; setTimeout(function () { $scope.$apply(function(){ $scope.loading = false; }); }, 1000); } 

希望这会帮助你！

Answer 5

当火angular事件像setTimeout的另一个对象，你应该使用

 $scope.$apply(function(){ $scope.loading = false; }); 

例如

 var loading={ show:function(){ $scope.loading=true }, hide:function(){ $scope.loading=false } } 

可能不是最好的方式

  var loading={ show:function(){ $scope.$apply(function(){ $scope.loading=true }); }, hide:function(){ $scope.$apply(function(){ $scope.loading=false }); } } 

Answer 6

我发现一种解决方法是不要用你想要的方式进行评估，而是使用ng-class。

  <div class="mycontent" data-ng-class="{'loaded': !loading}"> 

当$ scope.loading不等于true时，这个方法会将css类“loaded”添加到元素中。 那么你只需要一个使用CSS类来显示/隐藏内容。

 .mycontent { display: none; } .loaded { display: block; }