javascript - Angular : How to get ng-repeat directive template before it gets compiled?

Question

我正在尝试获取在我的自定义指令中使用的 ng-repeat 指令的初始 html 模板，该指令会 chop 嵌套的内容。但是，我得到的不是指令中设置的实际 html 文本，而是已经编译的 ng-repeat 指令，或者只是一条如下所示的注释:

<!-- ngRepeat: item in items -->

我已经在 github 上问过这个问题了，但不幸的是，答案对我来说不是很清楚。有没有办法在编译之前获取 ng-repeat 指令模板？

这是我正在努力实现的一个简单示例(和一个 plnkr ):

app.directive('parent', function() {
  return {
    restrict:'E',
    template:'<div ng-transclude></div>',
    transclude: true,
    priority: 1001,
    scope: true,
    compile: function(element, attrs) {
      console.log(element.html());
      console.log(element);
    }
  };
});

<parent>
  <div ng-repeat="item in items">
    {{item}}
  </div>
</parent>

Answer 1

ng-repeat 指令有 `transclude: "element"，因此，当它被编译时，整个元素被从 DOM 中取出(为嵌入做准备)并留下注释。

因此，第一个 console.log(element.html()) 将看不到任何内容，因为尚未包含您自己的指令。

但是，即使您在链接时检查内部 HTML，ngRepeat 也会被编译，但它的包含还不会发生；它发生在稍后，当 ngRepeat 的 scope.$watchCollection 触发时。

所以，唯一能看到内容的方法就是抢占ngRepeat的编译。您可以让您的 parent 指令 terminal: true，检查内容并手动重新编译。

您还可以添加一个指令，该指令在优先级高于 ngRepeat 的可重复元素上运行并获取内容。

(您甚至可以重复使用 “ngRepeat” 名称)

app.directive("ngRepeat", function(){
  return {
    require: "?^parent", // optionally require your parent
    priority: 1010,
    compile: function(tElem){
      var template = tElem.html();
      return function link(scope, element, attrs, ctrls){
         var parentCtrl = ctrls;

         if (!parentCtrl) return;

         // hand it off to the parent controller
         parentCtrl.setTemplate(template);
      }
    }
  }
})

Demo