4

我有一些代码可以在我的范围内的数组中添加和删除条目。现在代码没有被重用，而是被剪切/粘贴和调整。此外，它相当顽皮地使用范围继承来访问数组。我正在尝试创建一个可以解决这两个问题的指令。只要我向数组中添加条目，该指令就可以正常工作。一旦我删除一个条目，我似乎就打破了双向绑定。关于我应该如何处理的任何线索？

小提琴在这里。

它显示了旧代码 SkillsCtrl 和新代码 ListEditCtrl （从小提琴下面复制）。向任一列表添加条目将同时更新两者，但从任一列表中删除条目会破坏绑定。

function SkillsCtrl($scope) {
  $scope.addSkill = function () {
      $scope.profile.skills = $scope.profile.skills || [];
      $scope.profile.skills.push($scope.newskill);
      $scope.newskill = "";
  };

  $scope.removeSkill = function () {
      $scope.profile.skills = _.without($scope.profile.skills, this.skill);
  };
}

function ListEditorCtrl($scope) {
  $scope.addItem = function () {
      $scope.list = $scope.list || [];
      $scope.list.push($scope.newitem);
      $scope.newitem = "";
  };

  $scope.removeItem = function () {
      $scope.list = _.without($scope.list, this.item);
  };
}
4

1 回答 1

4

这是因为您使用http://underscorejs.org/#without，它创建了数组的副本，而不是仅仅删除该项目。当您删除一个项目时，一个新数组将链接到范围，并且新数组不与隔离范围内的数组链接。

要解决此问题，您可以改用 splice，它会从原始数组中删除项目：

$scope.removeSkill = function() {
    $scope.profile.skills.splice(_.indexOf($scope.profile.skills, this.skill),1);
};

...

$scope.removeItem = function() {
    $scope.list.splice(_.indexOf($scope.list, this.item),1);
};

更新的 plunker：http: //jsfiddle.net/jtjf2/

于 2013-05-22T10:08:30.097 回答