Question

请参阅plunker http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview（第15版）。

我有一个使用 ng-include 来呈现分层模板的简单示例。如果包含jQuery，它会正确运行。否则：它只呈现章节的文本。如果章节文本的呈现被注释掉，则它正确地呈现段落的文本。它看起来像AngularJS JQLite实现中的一个错误，我认为在“after”函数中实现：

after: function(element, newElement) {
   var index = element, parent = element.parentNode;
   forEach(new JQLite(newElement), function(node){
      parent.insertBefore(node, index.nextSibling);
      index = node;
   });
}

因为我收到错误： TypeError：无法调用null 的方法'insertBefore'。

我在上面提到的plunker中找到的代码如下：

的index.html：

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS template issue</title>
  <!-- uncomment line below to get it workinG using jQuery -->
  <!-- <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> -->
  <script src="//code.angularjs.org/1.2.10/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-include="'template.html'"/>
</body>
</html>

app.js：

var app = angular.module('plunker', []);

var lorumIpsumText = "<p>Lorem ipsum:<ul><li>one</li><li>two</li><li>three</li></ul></p>";

var chaptercontent = { 
  "Id":"SampleId1","Title":"1. Sample chapter one","Content":"<p>Text of sample chapter one<ul><li>one</li><li>two</li></ul></p>",
      "Paragraphs":[
          {"Id":"SampleId1.1", "Title":"1.1 First sample paragraph", "Content":lorumIpsumText, "Paragraphs":[]},
          {"Id":"SampleId1.2", "Title":"1.2 Second sample paragraph", "Content":lorumIpsumText, "Paragraphs":[]},
      ]
};

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustAsHtml = function(html) { return $sce.trustAsHtml(html); };
  $scope.chaptercontent = chaptercontent;
});

template.html：

<script id="paragraphTmpl.html" type="text/ng-template">
    <h4>{{paragraph.Title}}</h4>
    <!-- comment line below to have the paragraphs render correctly --> 
    <div ng-bind-html="trustAsHtml(paragraph.Content)"/>
    <ng-include ng-repeat="paragraph in paragraph.Paragraphs" 
                src="'paragraphTmpl.html'">
</script>

<div>
    <h3>{{chaptercontent.Title}}</h3>

    <div ng-bind-html="trustAsHtml(chaptercontent.Content)"/>
    <ng-include ng-repeat="paragraph in chaptercontent.Paragraphs" 
                src="'paragraphTmpl.html'"/>
</div>

非常感谢任何关于让它工作没有 jQuery的建议。

编辑：感谢Ilan，通过不使用自我关闭<div ng-bind-html='...'/>来解决问题，但将其写为<div ng-bind-html='...'></div>。我不明白为什么，但jQuery似乎解决了这种情况。有关正确的结果，请参阅http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview第17版。

Answer 1

经过短暂的调试后，我发现错误与您的模板有关：

您忘记使用</div>关闭此div：

<div ng-bind-html="trustAsHtml(paragraph.Content)"></div>

此错误使element.parentNode成为null：

after: function(element, newElement) {
   var index = element, parent = element.parentNode; // null

jQuery的实现有点不同，但这不是jqLite的错误。

自动关闭div标签（`<div/>`）？

HTML 5 不支持自动关闭div标记。

请检查此问题：Is it valid HTML5 to use a single tag for a div?

XHTML （我绝对不关心）支持所有元素的自动关闭标记。

请参阅What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

您的代码无论如何都不符合XHTML。

不使用jQuery时ng-include中的AngularJS错误

1 个答案:

经过短暂的调试后，我发现错误与您的模板有关：

自动关闭div标签（`<div/>`）？

不使用jQuery时ng-include中的AngularJS错误

1 个答案:

经过短暂的调试后，我发现错误与您的模板有关：

自动关闭div标签（<div/>）？

自动关闭div标签（`<div/>`）？