Angular：如何在<pre>标签内嵌套模板？

Question

有没有人知道如何在 'pre' 标签内执行 ng-include？情况是我有一个网站，其中包含一些代码块，其中一些代码块包含我想要移动到单独的局部文件的常用代码。例如：

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

毋庸置疑，这样做是行不通的，因为ng-include标签会直接出现在输出结果中...

- Sagi Mann

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）：

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

- Mario Lamacchia

---

谢谢，我正在尝试测试你的代码，但是我有一个问题：我希望common.html也是一个模板。然而，上面的代码将不会将common.html中的任何{{xxx}}标记绑定到作用域中。我该如何解决这个问题？ - Sagi Mann

请纠正我，但是Mustache将呈现模板，然而，如果常见的模板中还包含一个嵌套在其中的<my-pre-template>，Mustache就无法帮助了.. 对吗？ - Sagi Mann

不会的。如果这个东西变得太复杂，我会使用模板引擎静态地处理它。 - Mario Lamacchia

我能够使用$compile在my-pre-template中解析{{xx}}... 但是，如果我在common.html文件中放置另一个my-pre-template，我会收到一个错误，因为内部的my-pre-template无法编译，因为它需要myPre控制器... 我以为它会找到一个，因为页面最终是由my-pre在顶层构建的... - Sagi Mann

使用BFS解决，下面添加了一个新的答案+plunkr。 - Sagi Mann

Answer 2

我能够根据您使用顶级自定义预编译指令的想法解决它，但是使用不同的实现方式：我正在运行BFS算法，其中每个摘要周期我尝试编译任何直接子预包含。每次迭代时，我都会等待包含子项计数为零，然后再检查是否需要另一个周期（使用scope.$watch）。完成后，我编译整个my-pre以解析任何{{xxxx}}并将其转换为pre。Working plunkr

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

- Sagi Mann