0

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.

4

1 に答える 1