Javascript AngularJS：为什么这种重复在转换中不起作用？

好吧，这似乎有点深奥，但我正试图用我所写的指令来解决一个特定的问题：

下面是正在发生的事情的简化版本

这项工作： 我有一个指令，通过在编译阶段动态地向元素添加

ng repeat

属性来委托ng repeat，然后编译该元素：

myApp.directive('repeatDelegator', function($compile, $timeout) {
  return {
    compile: function(element, attrs){
        attrs.$set('ngRepeat', attrs.repeatDelegator); //Add ng-repeat to the dom
        element.removeAttr('repeat-delegator'); // remove the repeat-delegator to prevent infinite recursion of compilation

        var compiled =  $compile(element, null);
        return function(scope, element, attrs){
            compiled(scope);
        };
      }
   }
});

该指令的名称如下：

<ul>
    <li repeat-delegator="item in items">{{item}}</li>
</ul>

因此，当我们在这个转换中调用

repeat delegator

指令时，它失败了，什么也没有显示：

<transcluder>
    <ul>
        <li repeat-delegator="meal in meals">{{meal}}</li>
    </ul>
</transcluder>

{{mean}

这在第二个示例中进行了说明：

到目前为止我所知道的： 在执行Angular.js的过程中，我花了几个小时逐步浏览Angular.js源代码，试图找出它在转换中失败的原因，但我无法找到它的底部

在中断（转置）版本中，当我看到正在编译ngRepeat时，$scope似乎是正确的（它是主控制器$scope的子$scope，因为转置导致创建一个新的子$scope）。您可以在控制台中编写“scope.items”，并查看项目列表

我猜这样的事情正在发生：

• 首先编译transcluder指令，因为它在DOM树中的位置较高，所以首先遇到它
• 转换导致指令的子节点从DOM中删除，并克隆到

  $template

  var中，以便稍后插入回DOM
• 这可能会导致

  ng repeat

  针对

  节点的克隆进行编译。

  节点实际上从未连接回DOM

---

不过我不确定。这是一个非常棘手的问题，任何帮助都将不胜感激

好吧，在开发工具中黑客攻击Angular.js源代码一天后，我发现这里出了什么问题，我上面的猜测基本上是对的

问题是，

repeat delegator

指令将针对分离的克隆进行编译，因此有效地，ng repeated元素将被附加到丢失的DOM片段，而该片段永远不会被附加回页面主体

解决方案相当简单：将repeat delegator的委派ng repeat的编译移到链接函数中（而不是在编译阶段，它最初是在编译阶段）

这样做意味着，当编译ng repeat时，它是针对正确的DOM节点执行的，该节点现在安全地连接到transcluded指令下面的DOM

myApp.directive('repeatDelegator', function($compile, $timeout) {
    return {
      compile: function(element, attrs){
          attrs.$set('ngRepeat', attrs.repeatDelegator); //Add ng-repeat to the dom
          element.removeAttr(attrs.$attr.repeatDelegator); // remove the repeat-delegator to prevent infinite recursion of compilation

          return function(scope, element, attrs){
              var compiled =  $compile(element);
              compiled(scope);
          };
      }
   }
});

myApp.directive('repeatDelegator', function($compile, $timeout) {
    return {
      compile: function(element, attrs){
          attrs.$set('ngRepeat', attrs.repeatDelegator); //Add ng-repeat to the dom
          element.removeAttr(attrs.$attr.repeatDelegator); // remove the repeat-delegator to prevent infinite recursion of compilation

          return function(scope, element, attrs){
              var compiled =  $compile(element);
              compiled(scope);
          };
      }
   }
});