是否可以在引导过程中从angular将其从DOM中删除之前，获取包含ng-repeat的指令的innerHTML? [英] Is it possible to get the innerHTML of a directive containing an ng-repeat before angular removes it from the DOM during bootstrapping?

问题描述

我正在制作样式指南，希望动态添加语法突出显示和代码示例，而不必复制/粘贴和转义每个项目的代码.这个想法是，对于每个bb-prism指令，我都包含一个包含我的代码示例的bb-sample元素. bb-prism指令克隆代码示例的innerHTML，创建pre和code元素，然后将克隆副本复制到code元素.除了使用ng-repeat时，它非常漂亮. Angular似乎在我的prism指令可以复制ng-repeat之前将其删除.

<bb-prism>
    <h2>Multiple Addresses</h2>
    <bb-sample>
        <!-- Doesn't work with ng-repeat -->
        <bb-address address="address" ng-repeat="address in addresses"> </bb-address>
    </bb-sample>
</bb-prism>

预期结果是示例代码应呈现:

<bb-address address="address" ng-repeat="address in addresses"> </bb-address>

代替:

<!-- ngRepeat: address in addresses -->

这是一个可行的示例:

http://codepen.io/rustydev/pen/77fc7dc3e5365f10ebfabd54440f07c7/

解决方案

我玩过很多方法，包括在精简版本中使用pre-compile，并且无法将html登录到控制台.

我提出了一种替代方法，该方法将仅显示原始的干净标记，并且不添加任何有角度的内部类

它使用脚本标签模板$templateCache和ng-include.

这是目前在文本区域中概念设置标记的粗略(但有效)证明

查看

<div test template ="repeat">
  <h3>repeating items example</h3>

  <!-- Our snippet template -->
  <script type="text/ng-template" id="repeat">
    <div ng-repeat="item in items">{{item}}</div>
  </script>
  <!-- include same template -->
  <ng-include src="'repeat'"></ng-include>

  <!-- source display -->
  <h3>source</h3>
  <textarea style="width:100%"></textarea>

</div>

指令

.directive('test', function($templateCache) {

  return {
    scope: {template: '@'},
    link: function(scope, elem) {
       var code =$templateCache.get(scope.template);
       elem.find('textarea').val(code.trim())
    }
  }    
});

演示

请注意，有些gulp和grunt脚本可以将html文件的整个目录编译为$templateCache，并将它们放在run()块中

另一个想法是对每个html棱镜组件使用ng-include或templateUrl(function)，并使用$ templateCache获取整个html块，并在其上使用find()以获得<bb-sample>

更全面的演示

I'm working on a style guide and want to add syntax highlighting and code samples dynamically without having to copy/paste and escape the code for each item. The idea is that for each bb-prism directive, I include a bb-sample element that contains my code sample. The bb-prism directive clones the innerHTML of the code sample, creates pre and code elements, and then copies the clone into the code element. It's pretty slick except for when using ng-repeat. Angular seems to remove the ng-repeat before my prism directive can copy it.

<bb-prism>
    <h2>Multiple Addresses</h2>
    <bb-sample>
        <!-- Doesn't work with ng-repeat -->
        <bb-address address="address" ng-repeat="address in addresses"> </bb-address>
    </bb-sample>
</bb-prism>

The expected result is that the sample code should render:

<bb-address address="address" ng-repeat="address in addresses"> </bb-address>

Instead of:

<!-- ngRepeat: address in addresses -->

Here's a working example:

http://codepen.io/rustydev/pen/77fc7dc3e5365f10ebfabd54440f07c7/

解决方案

I played with numerous approaches, including using pre-compile in a stripped down version and couldn't log the html to console.

I propose an alternate approach that will show only the original clean markup and without any angular internal classes added

It uses script tag templates, $templateCache and ng-include.

Here's a rough ( but working) proof of concept setting markup in a textarea for now

View

<div test template ="repeat">
  <h3>repeating items example</h3>

  <!-- Our snippet template -->
  <script type="text/ng-template" id="repeat">
    <div ng-repeat="item in items">{{item}}</div>
  </script>
  <!-- include same template -->
  <ng-include src="'repeat'"></ng-include>

  <!-- source display -->
  <h3>source</h3>
  <textarea style="width:100%"></textarea>

</div>

Directive

.directive('test', function($templateCache) {

  return {
    scope: {template: '@'},
    link: function(scope, elem) {
       var code =$templateCache.get(scope.template);
       elem.find('textarea').val(code.trim())
    }
  }    
});

DEMO

Note that there are gulp and grunt scripts that can compile whole directory of html files into $templateCache also and put them in a run() block

Another thought is use ng-include or templateUrl(function) for each of your html prism components and use $templateCache to get whole block of html and use find() on that to get the uncompiled innerHTML of <bb-sample>

EDIT: More comprehensive demo

这篇关于是否可以在引导过程中从angular将其从DOM中删除之前，获取包含ng-repeat的指令的innerHTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！