不使用jQuery时AngularJS错误NG-包括

本文介绍了不使用jQuery时AngularJS错误NG-包括的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请参阅plunker （15版）。

See plunker http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview (version 15).

我使用的 NG-包含渲染分层模板一个简单的例子。它如果包括jQuery的正确worls。否则：它只是呈现章节的案文。如果章节文字的渲染被注释掉它正确呈现段落的文字。它看起来像在AngularJS JQLite实现中的错误，我认为在与执行功能后，

I have a simple example using ng-include to render a hierarchical template. It worls correctly if jQuery is included. Otherwise: it only renders the text of the chapter. If the rendering of the chapter text is commented out it correctly renders the text of the paragraphs. It looks like a bug in the AngularJS JQLite implementation, I think in the "after" function with implementation:

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

由于我的错误：类型错误：无法调用空的方法'的insertBefore

我的code作为可以在上述plunker中找到如下：

My code as can be found in the above mentioned plunker is as follows:

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是多少AP preciated。

Any advise on getting this to work without jQuery is much appreciated.

编辑：感谢宜兰的问题是由不使用自动关闭＆LT解决; DIV NG绑定-HTML =.../＆GT; ，但通过写为＆LT; DIV NG绑定-HTML ='...'＆GT;＆LT; / DIV＆GT; 。我不明白为什么，但jQuery的似乎解决这种情况。请参见 17版为正确的结果）。

Thanks to Ilan the issue is solved by not using a self-closing <div ng-bind-html='...'/>, but by writing it as <div ng-bind-html='...'></div>. I don't understand why, but jQuery seems to solve this case. See http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview version 17 for the correct results).

After a short debugging, I found the bug is with your template:

You forget to close this div with </div>:

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

这个错误使得 element.parentNode 是空：

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

的jQuery的实施是一个有点不同，但是，这不是与jqLite的错误。

The implementation of jQuery is a little different but that's not a bug with jqLite.

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

HTML 5 doesn't support self-closing div tags.

选中此问题：

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

XHTML ( which I definitely don't care about ) supports self-closing tags for all elements.

请参阅

您code是不符合XHTML无妨。

Your code is not compliant with XHTML anyway.

这篇关于不使用jQuery时AngularJS错误NG-包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

implementation