Question

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

小提琴是here。

它显示了旧的代码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);
  };
}

Answer 1

这是因为您使用了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/

如何从angular指令中的数组中删除

1 个答案: