Question

我遇到以下问题：

我想在应用程序的不同位置使用指令，并且不想在每次使用指令时指定父对象和指令对象。

看看这个plnkr： http://plnkr.co/edit/yUoXXZVJmoesIQNhoDDR?p=preview

它只是一个存储多级数组的$ scope.data对象。

$scope.data=
[
  {"name": "LEVEL0_A", "subitems":
  [
    {"name":"Level1_A", "subitems":[{"name":"A"},{"name":"B"}]},
    {"name":"Level1_B", "subitems":[{"name":"C"},{"name":"D"}]},
...
...
and so on

并且有一个名为deleteItem的示例自定义指令，它正是这样做的。

.directive('deleteItem', function() {
 return {
   scope:{
     item:'=',
     parent:'='
         },
   template: '<ng-transclude></ng-transclude><a href="" ng-click="deleteItem(item, parent)">Delete</a>',
   transclude:true,
   controller: function($scope){
     $scope.deleteItem=function(currentItem,currentParent){
       currentParent.subitems.splice(currentParent.subitems.indexOf(currentItem),1);
   }; 
  }
 };
});

在这里你看到了html模板

<body ng-app="myApp">
  <div ng-controller="myController">
    <div ng-repeat="level0 in data">
      <h2>{{level0.name}}</h2>
      <div ng-repeat="level1 in level0.subitems">
        <div delete-item parent="level0" item="level1">
          {{level1.name}}
        </div>
        --------------------
        <div ng-repeat="level2 in level1.subitems">
          <div delete-item parent="level1" item="level2">
            Name: {{level2.name}}
          </div>
        </div>
        <hr>
      </div>
    </div>
  </div>
</body>

我的意思是它有效，但实际上我觉得必须有某种方法找到项目和父项，而无需手动将它们专门链接到范围。

如果有人能指出我正确的方向，我真的很高兴。谢谢马库斯

Answer 1

如果您这样做。

 $scope.deleteItem=function(currentItem,currentParent){
   currentParent.subitems.splice(currentParent.subitems.indexOf(currentItem),1);
 };

然后你的指令依赖于其范围之外的数据结构。这意味着该指令只能删除完全符合该模式的项目。如果要对不是数组的数据使用删除按钮该怎么办？

更好的方法是使用API功能&在外部作用域上执行表达式。

app.directive('deleteItem', function () {
    return {
        scope: {
            remove: '&deleteItem'
        },
        template: '<ng-transclude></ng-transclude><a ng-click="remove()">Delete</a>',
        transclude: true
    };
});

当用户点击“删除”时，系统会调用remove() API，模板会处理该项目的删除方式。

<div ng-repeat="level0 in data">
    <h2>{{level0.name}}</h2>

    <div ng-repeat="level1 in level0.subitems">
        <div delete-item="level0.splice($index,1)">
            {{level1.name}}
        </div>
        --------------------
        <div ng-repeat="level2 in level1.subitems">
            <div delete-item="level1.splice($index,1)">
                Name: {{level2.name}}
            </div>
        </div>
        <hr>
    </div>
</div>

Angular：在指令中查找父对象

1 个答案: