Question

我对使用XHTML的AngularJS的内联模板的行为感到困惑。

<!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的{{1}}子节点变为空。

如果有人能告诉我更改扩展会发生什么，我会很高兴。

Answer 1

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">
    &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块作为模板。

AngularJS的内联模板不适用于XHTML

1 个答案: