不使用jQuery时AngularJS错误NG-包括 [英] AngularJS bug in ng-include when not using jQuery
问题描述
请参阅plunker http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preVIEW （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的似乎解决这种情况。请参见 http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=$p$pview 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).
推荐答案
您忘记关闭这个DIV与＆LT; / DIV＆GT; ：
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.
选中此问题：是它有效的HTML5使用一个标签为一个div？
XHTML （我绝对不关心）支持自闭标签的所有元素。
XHTML ( which I definitely don't care about ) supports self-closing tags for all elements.
请参阅What都在XHTML有效的自闭元素（由主流浏览器实现）？
您code是不符合XHTML无妨。
Your code is not compliant with XHTML anyway.
这篇关于不使用jQuery时AngularJS错误NG-包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
