I am puzzled about a behavior of inline templates of AngularJS with XHTML.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<script type="text/ecmascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script type="text/ecmascript">
//<![CDATA[
var app = angular.module('app', []);
app.directive('dir',function(){ return{
transclude: true,
templateUrl: 'template'
//template: '<div>Input: <span data-ng-transclude=""></span></div>'
//if I use template instead of templateUrl, the code works well.
}; });
//]]>
</script>
<title>Angular JS template</title>
</head>
<body>
<script type="text/ng-template" id="template">
<div>Input: <span data-ng-transclude=""></span></div>
</script>
<input type="text" data-ng-model="input"></input>
<div data-dir="dir"><span style="text-decoration: underline">{{input}}</span></div>
</body>
</html>
This code works well with the extension of the source .html but with .xhtml, child nodes of <div data-dir="dir"> turn empty.
I would be happy if someone could tell me what happens with a change of extensions.
XHTML is more fidgety with the contents of scripts.
Solution: change all < to < in the template.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<script type="text/ecmascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script type="text/ecmascript">
//<![CDATA[
var app = angular.module('app', []);
app.directive('dir',function(){ return{
transclude: true,
templateUrl: 'template'
//template: '<div>Input: <span data-ng-transclude=""></span></div>'
//if I use template instead of templateUrl, the code works well.
}; });
//]]>
</script>
<title>Angular JS template</title>
</head>
<body>
<script type="text/ng-template" id="template">
<div>Input: <span data-ng-transclude=""></span></div>
</script>
<input type="text" data-ng-model="input"></input>
<div data-dir="dir"><span style="text-decoration: underline">{{input}}</span></div>
</body>
</html>
Or use a CDATA block for the template.