Question

我正在尝试获取在我的自定义指令中使用的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>

Answer 1

ng-repeat指令具有`transclude：“元素”，因此，在编译时，整个元素从DOM中取出（准备进行转换）并留下注释。

所以，第一个console.log(element.html())将看不到任何内容，因为没有发生你自己的指令的转换。

但即使你在链接时检查内部HTML，ngRepeat也会被编译，但它的翻译不会发生;它发生在scope.$watchCollection ngRepeat的{{1}}之后。

因此，查看内容的唯一方法是抢占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

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

1 个答案: