Question

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

<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/

Answer 1

我使用了多种方法，包括在精简版中使用pre-compile，无法将html记录到控制台。

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

它使用脚本标记模板$templateCache和ng-include。

这是一个粗略（但有效）的概念验证设置标记在textarea中现在

查看

<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())
    }
  }    
});

的 DEMO

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

另一个想法是对每个html prism组件使用ng-include或templateUrl(function)，并使用$ templateCache获取整个html块并使用find()来获取未编译的innerHTML <bb-sample>

编辑：More comprehensive demo

是否可以获取包含ng-repeat的指令的innerHTML，然后在自举期间将角色从DOM中删除？

1 个答案: