Встроенный шаблон AngularJS не работает с XHTML

Я озадачен поведением встроенных шаблонов AngularJS с 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>

Этот код хорошо работает с расширением исходного кода .html но с .xhtmlДочерние узлы <div data-dir="dir"> пустить

Я был бы счастлив, если бы кто-то мог сказать мне, что происходит со сменой расширений.

Источник

1 ответ

Решение

XHTML более нервничает с содержанием скриптов.

Решение: изменить все < в &lt; в шаблоне.

<!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>

Или используйте блок CDATA для шаблона.

Источник
Другие вопросы по тегам