javascript - 从它自己的链接器函数编译指令

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();

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