See plunker http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview (version 15).
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;
});
}
Because I get the error: TypeError: Cannot call method 'insertBefore' of null.
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>
Any advise on getting this to work without jQuery is much appreciated.
EDIT: 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).
