AngularJS：它被编译之前，如何获得纳克重复指令模板？ [英] AngularJS : How to get ng-repeat directive template before it gets compiled?

问题描述

我试图获得该是trancludes嵌套的内容我自定义指令内所使用的NG-重复指令最初的HTML模板。而是被设置我得到或者已经编译指令NG重复指令或仅仅是看起来像下面的注释内的实际HTML文本：

 ＆LT;  -  ngRepeat：在项目的项目 - ＆GT;
 

我已经要求在 github上这个问题，但遗憾的是，答案WASN T代表我很清楚。有没有办法让NG-重复指令模板，它被编译过吗？

下面是什么，我想实现一个简单的例子（和 plnkr ）

  app.directive（父，函数（）{
  返回{
    限制：'E'，
    模板：'＆LT; D​​IV NG-transclude＆GT;＆LT; / DIV＆GT;，
    transclude：真实，
    优先级：1001
    适用范围：真，
    编译：功能（元素，ATTRS）{
      的console.log（element.html（））;
      的console.log（元）;
    }
  };
}）;
 

 ＆LT;母体GT;
  ＆LT; D​​IV NG重复=项中的项目＆GT;
    {{项目}}
  ＆LT; / DIV＆GT;
＆LT; /母体GT;
 

解决方案

NG-重复指令有`transclude：元素，所以，当它被编译，整个元素取出DOM（以preparation为包含）和注释留。

所以，第一个的console.log（element.html（））将看不到任何东西，因为你自己的指令的transclusion并没有发生。

但即使你检查在链接时的内部HTML中， ngRepeat 将被编译，但其transclusion也没有发生;后来发生了，当范围。$ watchCollection ngRepeat 火灾。

所以，看到的内容的唯一方法是preempt ngRepeat 的汇编。你可以让你的父指令端子：真正的，检查的内容，并手动重新编译

您也可以使用较高的优先级添加一个可重复的元素上运行指令比 ngRepeat 并获得内容。

（你甚至可以重复使用ngRepeat名）

  app.directive（ngRepeat功能（）{
  返回{
    要求：^父，//可选需要你的父母
    优先级：1010，
    编译：功能（特莱姆）{
      变种模板= tElem.html（）;
      返回功能链接（范围，元素，ATTRS，ctrls监视）{
         VAR parentCtrl = ctrls监视;         如果（parentCtrl！）回报;         //它交给父控制器
         parentCtrl.setTemplate（模板）;
      }
    }
  }
}）
 

演示

I'm trying to get the initial html template for the ng-repeat directive that is used inside my custom directive which trancludes nested content. But instead the actual html text that was set inside the directive I get either already compiled ng-repeat directive or simply a comment that looks like the following:

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

I already asked that question at github, but unfortunately the answer wasn't very clear for me. Is there a way to get ng-repeat directive template before it gets compiled?

Here's a simple example of what I am trying to achieve (and a 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 directive has `transclude: "element", and so, when it is compiled, the entire element is taken out of DOM (in preparation for transclusion) and a comment is left.

So, the first console.log(element.html()) won't see anything, since the transclusion of your own directive hasn't happened.

But even if you examine the inner HTML at link-time, the ngRepeat will have been compiled, but its transclusion would not yet happen; it happens later, when scope.$watchCollection of ngRepeat fires.

So, the only way to see the content is to preempt the compilation of ngRepeat. You can either make your parent directive terminal: true, examine the contents and manually re-compile.

You can also add a directive that runs on a repeatable element with higher priority than ngRepeat and get the contents.

(You could even reuse the "ngRepeat" name)

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：它被编译之前，如何获得纳克重复指令模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！