范围变量以角度更新，但变化不会反映给用户

scope variable updated in angular but change is not reflected to user

本文关键字：变化 给用户 变量 更新 范围      更新时间：2023-09-26

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

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

然后我在HTML中显示变量，如下所示：

{{pane.count}}

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

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

例如

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

我使用的是Angular v1.3。我做错了什么？

为了让angular知道更改，您必须使用angular包装器进行超时。

试试这个：

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

通常，当您在angular world之外有一个改变值的结构（如jQuery插件）时，您必须调用$scope$apply（）让angular了解它们。

$scope.$apply();

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

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);
});
<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>

相关文章：