Question

我有一个非常奇怪的用例。

我想获取一个元素，在其上放置一个结构指令，然后用在具有ng-repeat的子节点上具有嵌套结构指令的模板（在运行时选择）替换该元素。

示例：

<div item-structure item="root"></div>

这是我写的指令：

function itemStructure($compile) {
  return {
    restrict: "A",
    scope: {
      item: "=",
    },  
    priority: 900,
    controller: function() {
      var self = this;

      self.deleteNode = function(parent, node) {
        if(parent)
          parent.children.splice(parent.children.indexOf(node), 1);
        console.log(parent, node);
      }
      console.log(self.item.id + ' ' +self.item.type);
      console.log(self.item.children);
    },
    controllerAs: "vm",
    bindToController: true,
    link: function(scope, element, attrs, ctrl, transcludeFn) {
      scope.$watch(watchNode, function(newValue, oldValue) {
        if (newValue) {
          var type = newValue.type;
          console.log(scope.vm.item.children);
          var content = "<div class='item'> {{vm.item.id}} - {{vm.item.type}} <div ng-repeat='child in vm.item.children' item-structure item='child'> {{child.item.type}} </div> </div>";
          var newElement = angular.element(content);

          var overlayContent = "<div class='overlay' ng-click='vm.deleteNode($parent.vm.item, vm.item)'> </div>";
          var overlayElement = angular.element(overlayContent);
          newElement.prepend(overlayElement);

          element.replaceWith($compile(newElement)(scope));
        }
      }, true);

      function watchNode() {
        var original = angular.copy(scope.vm.item);
        if (original.children)
          original.childrenLength = original.children.length;
        delete original.children;
        return original;
      }
    }
  };
}

奇怪的是，这适用于许多深度嵌套级别（虽然性能下降），但是，当我尝试更改集合（添加或删除项目）时，该指令在ng-repeat中呈现但不会被转换。 / p>

目前，我将删除链接到绿色矩形。

另一个奇怪的功能，添加一个项目将把它放在集合的顶部，而不是在底部。

也许我应该为此使用transclude？我试着没多少运气。

Plunkr，在这里：https://plnkr.co/edit/aYiz883Cx6O8XP05wABo?p=preview

非常感谢任何帮助。

Angular指令用带有嵌套指令的模板替换dom节点

0 个答案: