Inline template of AngularJS does not work with XHTML

Question

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.

Hm. Do you absolutely need it to be polyglot markup? The solution to make it work in XHTML is not difficult, but it does make it incompatible with the HTML version. — Mr Lister
– Mr Lister, Commented Dec 24, 2016 at 7:42
Thanks. For some reasons, it would be desirable that my source is machine-readable. Thus, I'm trying to use XHTML. — mac wac
– mac wac, Commented Dec 24, 2016 at 12:39

Mr Lister · Accepted Answer · 2016-12-24 07:46:11Z

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">
    &lt;div>Input: &lt;span data-ng-transclude="">&lt;/span>&lt;/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.

Thanks. It works completely fine. It was unimaginable for me that the content of <script> is required to escape (since it appeared well-formed to me)!
Yes, that's one very big difference between .xhtml files and .html files: in HTML, <script> (and other elements, such as <style>) is parsed using a plain text parser: its content is simply a chunk of text. While in XHTML, all elements are parsed in the same way, so in your example, the <script>'s content was a <div>.

Collectives™ on Stack Overflow

Inline template of AngularJS does not work with XHTML

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related