AngularJS：如何在编译之前获取 ng-repeat 指令模板？答案

【问题标题】：AngularJS : How to get ng-repeat directive template before it gets compiled?AngularJS：如何在编译之前获取 ng-repeat 指令模板？
【发布时间】：2015-08-08 06:52:37
【问题描述】：

我正在尝试获取在我的自定义指令中使用的 ng-repeat 指令的初始 html 模板，该指令包含嵌套内容。但取而代之的是在指令中设置的实际 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>

【问题讨论】：

你是对的——评论是编译的产物。在一天结束时，您实际上想要实现什么。可能有更简单的方法
因此，我想要一个包含 ng-repeat 并对其进行修改的指令（实际上它应该用 dir-paginate 指令替换 ng-repeat）。这就是为什么我在编译之前尝试检索初始的 ng-repeat
这似乎是一种奇怪的实现方式。为什么不直接使用正确的指令呢？但是，如果必须，您可以使用terminal: true 和高于ng 的重复优先级并修改HTML，然后在内容上启动$compile
在这个指令的引擎盖下还会有一些其他的东西，所以我认为这是唯一的方法。关于制作指令终端 - 似乎它不是那样工作的。我试图使外部指令终端以及指定的优先级高于 ng-repeat 的优先级，但我得到的只是
.
看，可以玩并让它工作，但你的问题是关于获取ng-repeat 的模板。因此，最好提出一个新问题并指定确切的要求。

标签： javascript angularjs angularjs-directive angularjs-ng-repeat

【解决方案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

【讨论】：