Question

我的指令设置如下：

angular.module('RecursiveDirective', []).
directive('item', function($compile) {
  return {
    restrict: 'E',
    template: '<div><input type="text" ng-model="itemvalue"/></div>',
    link: ItemLinker,
    controller: 'ItemController',
    scope: {}
  }

  function ItemLinker(scope, element, attribute) {
    element.on('keyup', function(event) {
      var code = event.keyCode || event.which;
      if(code==13) {
        element.append('<item></item>');
        $compile(element.contents())(scope);
      }
    })
  }
}).
controller('ItemController', function($scope) {
  $scope.itemvalue = "Some Value";
})

现在我想在这个指令元素上按下回车键时克隆元素。

我能够克隆该指令，但它没有正确设置范围。从第二次克隆开始，该指令将重置在其克隆所涉及的指令上设置的先前值。

如何克隆指令，以便它获得自己的新范围，就像新初始化的指令一样。

Plunker Here - http://plnkr.co

修改

我必须使用指令创建嵌套结构，即包含另一个指令项的指令项。上述问题是线性表示。

所以，我不能在这里使用ng-repeat。感谢

Answer 1

element.on('keyup', function(event) {
  event.stopPropagation();

如果你没有停止传播，那么事件就会冒泡，你最终会再次编译每个元素，并且每次添加的项目都要多次添加

Answer 2

我认为你不应该创建一个递归指令。你可以像这样创建一个ng-repeat：

<item ng-repeat='item in vm.items'></item>

然后检查输入并在vm.items

中添加其他项目

Answer 3

试试这个plunker。

// Code goes here
angular.module('RecursiveDirective', []).
directive('item', function($compile) {
  return {
    restrict: 'E',
    template: '<div  ng-repeat="itemvalue in inputs track by $index"><input ng-keyup="keyUp($event)" type="text" ng-model="itemvalue.value"/></div>',
    link: ItemLinker,
    controller:"ItemController",
    scope: {}
  }
  
  function ItemLinker(scope, element, attribute) {
    scope.keyUp = function(event){
      if(event.keyCode==13)
      {
          scope.inputs.push({value:""});
      }
    }
    scope.inputs =[{value:scope.itemvalue}];
  }
}).
controller('ItemController', function($scope) {
  $scope.itemvalue = "Some Value";
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="RecursiveDirective">
    <div></div>
    <item></item>
  </body>

</html>

从其自己的链接器函数编译指令

修改

3 个答案: