Html 角度：如何在内部嵌套模板<；预处理>；标签？

有人知道如何在“pre”标记中包含ng吗？用例是，我有一个带有一些代码块的网站，其中一些代码块包含我想要转移到单独部分的公共代码。例如：

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

我的页面特定代码。。。。

---

不用说，这是行不通的，因为ng include标记会出现在输出中…

您可以使用两个指令：一个是一种ngInclude，另一个等待第一个加载内容并用

pre

（）替换自己：

---

基于您使用顶级定制pre指令的想法，我能够解决这个问题，但是使用了不同的impl：我正在运行一个BFS算法，在这个算法中，我尝试编译任何直接子pre包含的每个摘要周期。在检查是否需要另一个循环（使用scope.$watch）之前，每次迭代我都会等到包含子项计数为零。完成后，我编译整个my pre以解析任何{xxxx}并将其转换为pre

//模拟3d派对Highlighter（使用HLJS测试）
.directive（'myHighlighter'，函数（$compile，$timeout）{
返回{
限制：'E'，
控制器：函数（）{}，
链接：功能（范围、元素、属性、控制器）{
//等待摘要的结束：
$timeout（函数（）{
$（element.replace为（$（''+element.text（）+''）；
});
}
}
})
//完成编译后，myPre将自动插入自定义荧光灯：
.directive（'myPre'，函数（$compile，$timeout）{
返回{
限制：'E'，
控制器：函数（）{}，
链接：{
前置：功能（范围、元素、属性、控制器）{
//限制允许的总夹杂物，以避免环：
scope.it=100；
//计算内含物：
scope.incCount=0；
范围.$watch（'incCount'，函数（newVal、oldVal、scope）{
如果（oldVal！==newVal&&newVal==0）{
//观察包含标记计数。当它为零时，
//看看我们是否需要另一张BFS儿童通行证：
var children=$（'pre-include'，element）.length；
如果（子项！==0）{
$compile（元素）（范围）；
}否则{
//如果没有，构建荧光灯，我们就完成了：
var e2=$（''+element.html（）+''）；
$（元素）。替换为（e2）；
美元（e2）（范围）；
}
}
}); 
},
post:函数（作用域、元素、属性、控制器）{
}
}
}
})
.directive（'preInclude'，函数（$templateRequest，$compile）{
返回{
链接：{
pre：函数（范围、元素、属性、myPre）{
scope.incCount++；
}, 
post：功能（范围、元素、属性、myPre、转移）{
scope.it--；
如果（scope.it，谢谢，我正在尝试测试您的代码，但是我有一个问题：我希望common.html也是一个模板将common.html中的标记添加到作用域中。如何修复？如果我错了，请更正我，但是Mustach将呈现模板，但是，如果公共模板中也包含嵌套的，Mustach将不会有帮助。对吗？不，不会。如果事情变得太复杂，我将使用模板引擎静态地执行此操作。我能够使用$compile获得{xx}要在my pre template中解决…但是，如果我将另一个my pre template放在common.html文件中，我会得到一个错误，即内部my pre template无法编译，因为它需要myPre controller…我认为它会找到一个，因为页面最终是如何构建的（即顶层的my pre）…使用BFS解决，在下面添加了一个新答案+plunkr
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>

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

// simulate a 3d party highligther (tested with HLJS)
.directive('myHighlighter', function($compile, $timeout) {
      return {
        restrict: 'E',
        controller: function() {},
        link: function(scope, element, attrs, controller) {
          // wait for the end of the digest:
          $timeout(function() {
          $(element).replaceWith($('<pre>' + element.text() + '</pre>'));
         });
        }
      }
})

// myPre will conert itself to the custom highlighter once done compiling:
.directive('myPre', function($compile, $timeout) {
      return {
        restrict: 'E',
        controller: function() {},
        link: { 
          pre: function(scope, element, attrs, controller) {
          // limit the total inclusions allowed to avoid loops:
          scope.it = 100;
          // count inclusions:
          scope.incCount = 0;

            scope.$watch('incCount', function(newVal, oldVal, scope) {
              if (oldVal !== newVal && newVal === 0) {
                  // watch the include tag count. When it's zero,
                  // see if we need another BFS pass for sub-children:
                var children = $('pre-include', element).length;
              if (children !== 0) {
                $compile(element)(scope);
              } else {
                  // If not, build the highlighter and we're done:
                var e2 = $('<my-highlighter>' + element.html() + '</my-highlighter>');
                $(element).replaceWith(e2);
                $compile(e2)(scope);
              }
              }
            }); 
          },
          post: function(scope, element, attrs, controller) { 
          }
        }
      }
})

.directive('preInclude', function($templateRequest, $compile) {
  return {
    link: { 
      pre: function(scope, element, attrs, myPre) {
          scope.incCount++;
      }, 
      post: function(scope, element, attrs, myPre, transclude) {
        scope.it--;
        if (scope.it <= 0) {
          console.log("max iterations reached, stopping");
          return;
        }
        // enqueue the inclusion in the BFS queue:
        $templateRequest(attrs.src).then(function(data) {
          element.replaceWith(data);
          scope.incCount--;
        });
      }
    }
  };
})