html - Angular : how to nest templates inside tags?

Question

有谁知道如何在“pre”标签中执行 ng-include？用例是我有一个带有一些代码块的网站，一些代码块包含我想移动到单独部分的公共(public)代码。示例:

<pre>
    My page-specific code....
    <ng-include src="'partials/common-code.html'"></ng-include>
</pre>

不用说，这是行不通的，因为 ng-include 标签确实出现在输出中......

Answer 1

您可以使用两个指令:一个是一种 ngInclude，另一个等待第一个加载内容并将其自身替换为 pre ( http://plnkr.co/edit/fPy4M0ZK94erF31EeObE ):

module.directive('myPre', function() {
  return {
    controller: function() {},
    restrict: 'E',
    link: function(scope, element, attrs, controller) {
      controller.checkContent = function() {
        if (!element.children().length) {
          element.replaceWith('<pre>' + element.text() + '</pre>');
        }
      }
    }
  }
})
.directive('myPreTemplate', function($http) {
  return {
    require: '^myPre',
    restrict: 'E',
    link: function(scope, element, attrs, myPre) {
      $http.get(attrs.src).then(function(res) {
        element.replaceWith(res.data);
        myPre.checkContent();
      });
    }
  }
});

你可以像这里一样使用它:

<my-pre>
  Code here...
  <my-pre-template src="common.html"></my-pre-template>
  ...and here...
  <my-pre-template src="common.html"></my-pre-template>
  ...and here again
</my-pre>

编辑:渲染通用模板的内容，最好的方法是使用mustache ( plunker updated ):

...
$http.get(attrs.src).then(function(res) {
  var rendered = Mustache.render(res, scope);
  element.replaceWith(rendered);
  myPre.checkContent();
});
...