javascript - 删除项目时 Angular 范围不会更新

Question

我有一个简单的应用程序，我可以在其中将用户添加到列表并删除它们。

添加新用户的表单绑定(bind)到 $scope.newPerson。在提交表单时，我将 newPerson 对象添加到 $scope.people 中，这是一个包含 person 对象的数组。

我使用 ng-repeat 指令遍历 people 数组，以打印出当前添加到范围中的人员。这些行都有一个删除按钮(Jade 片段):

div.row(data-person, ng-repeat="person in people", ng-model="person")
    button(ng-click="removePerson(person)") Remove

当我点击删除按钮时，我执行了这个函数:

$scope.removePerson = function(person) {
  var index = $scope.people.indexOf(person);
  if (index > -1) {
    $scope.people.splice(index, 1);
    person = null;
  }
}

这将从表中删除该行，并将 person 范围设置为 null。 Batarang 之后显示 { This scope has no models }。

但是，我注意到我的 people 数组没有更新。当我在 Batarang 中检查它的范围时，我刚刚删除的人仍在该数组中。当我开始输入以添加新人时，它会更新。如果我不这样做就将整个页面提交到我的服务器，该数组仍然包含已删除的人。

如果我将 $scope.$apply() 放在 person = null; 之后，我会得到预期的行为，但是它会抛出一个错误，即 apply正在进行中。我还读到自己调用 $apply() 被认为是不好的做法。 (?)

我是 Angular 的新手，我似乎找不到很多关于解决这个问题的信息。当我删除一个人时，我如何让它更新我的数组？谢谢。

Answer 1

我做了以下事情来解决这个问题:

ng-repeat block 上不再有 ng-model:

div.row(data-person, ng-repeat="person in people")

为 removePerson() 重构了 ng-click 事件:

<button ng-click="removePerson($index)">
    Remove
</button>

并将 removePerson() 代码更改为:

$scope.removePerson = function(index) {
  $scope.people.splice(index, 1);
};

与我以前的代码相比，不确定这是否真的修复了任何问题，因为我注意到这也是一个 Batarang 问题。当我简单地将 {{ people }} 记录到我的 HTML 或 console.log($scope.people) 时，我看到了 people 数组更新。但是，在 Batarang 中，数组不会更新。

经验教训:有时候，自己记录日志比依赖工具更好 ;)