Question

我有一些角度变量设置如下：

$scope.pane = [];
$scope.pane.count = 0;
$scope.pane.max = 5;

然后我在HTML中显示变量：

{{pane.count}}

此工作正常，并按预期显示0。

现在，如果我在任何时候更新变量，更新确实发生（我可以看到使用console.log），但HTML中的打印版本不会更新。

E.g。

setTimeout(function(){
  $scope.pane.count = 1;
},1000);

我正在使用Angular v1.3。我做错了什么？

Answer 1

为了让角度知道更改，您必须使用角度wrapper进行超时。

试试这个：

$timeout(function() {
  $scope.pane.count = 1;
}, 1000);

通常，当你有一个更改值的角度世界之外的结构（例如jQuery插件）时，你必须调用$ scope。$ apply（）让角度知道它们。

$scope.$apply();

Answer 2

setTimeout在angularjs范围之外，因此您需要使用$ scope。$ apply或$ timout请参阅下面的示例演示

＆＃13;

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope, $timeout) {

  $scope.pane = [];
  $scope.pane.count = 0;
  $scope.pane.count2 = 0;
  $scope.pane.max = 5;

  setTimeout(function() {
    $scope.$apply(function() {
      $scope.pane.count = 1;
    })

  }, 1000);

  $timeout(function() {
    $scope.pane.count2 = 5;
  }, 2000);


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app">
  <div ng-controller="homeCtrl">
<h3>setTimeout</h3>
    Count 1: {{pane.count}}<br/>
    <h3>$timeout</h3>
    Count 2: {{pane.count2}}
  </div>
</div>

＆＃13;

范围变量以角度更新但更改未反映给用户

2 个答案: