AngularJS:如何在编译之前获取ng-repeat指令模板

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

本文关键字：ng-repeat 获取 指令 编译 AngularJS      更新时间：2023-09-26

我试图获得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指令具有' transclude: "element"，因此，当它被编译时，整个元素被从DOM中取出(为transclude做准备)并留下注释。

所以，第一个console.log(element.html())不会看到任何东西，因为你自己的指令的传输没有发生。

但是，即使在链接时检查内部HTML, ngRepeat将被编译，但它的transclusion尚未发生;当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);
      }
    }
  }
})

相关文章：