Question

我有一个带控制器的角度应用程序。我还有一个包含数据列表的服务 - 一个具有键值的对象数组。列表有时会随机变化。该服务将列表公开给控制器。在我的模板中，我重复'列表。问题是当我更新服务列表时，我不知道如何更新视图中的列表。列表中的更改仅在数据级别上发生，而在UI级别上不发生。 当我更新现有列表时，我可以看到ui中的更改，但是当我用不同的列表替换列表时，视图不会更新。

plunker demonstration

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, getData) {
  $scope.values = getData.values
});

app.factory('getData', function($timeout){
  var values = [{key:"Good", value:"Morning"}];
  console.log(values)

  $timeout(function(){
    values.push({key:"Good", value:"Afternoon"})
    console.log(values)
  }, 500)

    $timeout(function(){
    values = [{key:"Good", value:"Night"}]
    console.log(values)
  }, 1000)

  return{
    values:values
  }
});

Answer 1

在第二个$timeout中，您通过创建对象的新引用为values变量赋值。这就是为什么在视图中看不到新分配的数组的原因。

而是创建一个新引用，只需清除当前数组并使用新值扩展当前对象。因此，对象的引用将被保留，并且关联绑定将按原样工作。

<强>代码

$timeout(function() {
    values.length = 0; //clearing array
    //extending current object with new values
    angular.extend(values, [{
      key: "Good",
      value: "Night"
    }])
    //instead of doing extend you can just push an objet as well.
    //values.push({ key: "Good", value: "Night" }]);
    console.log(values)
}, 1000);

Demo Plunkr

Answer 2

这是在创建新列表并将其分配给值时引起的。 $scope.values设置为指向服务的values一次，因此当您更新相同的列表时（就像使用push在第一次超时中所做的那样），控制器会看到该更改。然而，在第二个超时中，您为values分配了一个全新的列表，但控制器仍然指向原始列表。

将第二个超时更改为以下内容以进行修复：

$timeout(function(){
    values.splice(0, values.length);
    values.push({key:"Good", value:"Night"})
    console.log(values)
}, 1000);

替换服务上的列表，并在视图中查看其更改

2 个答案: