Question

所以我需要能够调用指令控制器的一个函数，让它将一个现有的子指令包装在一个新的指令中，同时保持现在包装的指令的状态（它的控制器和所有可能的子节点），否则修改父节点指令的模板。这个过程也必须能够逆转。

Quick and super dirty fiddle to show the idea

所以DOM开始为：

<split>
  <innerDirective></innerDirective>
</split>

当调用split指令的控制器函数时，应该会发生这种情况：

<split> // same outer parent
  <split> // new directive
    <innerDirective></innerDirective>// SAME innerDirective instance
  </split>
  <split>// new directive
    <innerDirective></innerDirective> //New innderDirective instance
  </split>
</split>

我最初使用.html函数来设置split指令内容，并使用$ compile服务来重构DOM。这当然会破坏原有的内部指导。由于它可能很深，所以将它的数据存储在父分割中并使用链接函数检索是不可行的（尽管我尝试过）。

我也尝试过使用jquery的.wrap和.unwrap函数，除了添加的标签不是作为指令编译的，所以不是真的。

是否有正确的方法来执行此操作，或者只是编译添加了.wrap的外部标记，并将innerDirective的范围更新为新的父级？

感谢您提供任何帮助和建议！

编辑：我有一个控制器沿着这个谎言，让我们设置控制拆分'E'指令：

function SplitCtrl($scope, $compile){
  //stuff

  //First way, redefine html contents and recompile
  this.split1 = function(){
    //element has been linked to the directive's element
    $scope.element.html('<split></split><split></split>');
    $compile($scope.element.contents())($scope);
  };

  //Second way, jquery.wrap
  this.split2 = function(){
    $($scope.element).children('innerDirective').wrap('<split />');
    // then I need to instantiate the new split 
    // without reinstantiating now wrapped directive.
    // Adding second split is fine in this case, I can do that.
  };
};

模板是：

<innderDirective></innerDirective>

AngularJS：动态添加/删除现有包装指令

0 个答案: