如何结合angularjs和xhtml？

这里是angularjs一个最小的例子，当保存为angular.html其工作的一个例子：如何结合angularjs和xhtml？

<!DOCTYPE html> 
<html lang="en" xmlns:ng="http://angularjs.org" ng:app=""> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

但是我坚信在XML和我喜欢创造我所有的HTML文档的XML标准。我试着去适应的例子并保存为angular.xhtml：

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng:app=""> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" /> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

最大的变化是XHTML的命名空间和文件扩展名“.xhtml”。没有任何错误或任何事情。只是显示的页面好像角度不存在一样。

如何获得angularjs使用XML兼容文件？

来源

2014-04-20 yankee

你是使用HTML5而不是[XHTML Doctype]（http://www.w3.org/QA/2002/04/valid-dtd-list.html）。 –

@ klingt.net：据我所知，这与html规范一致，该规范定义了推荐的doctype，并且还允许提供内容类型为application/xhtml + xml的HTML5文档。 – yankee

我找到了一个使用手动设置的解决方案。然后，该代码看起来是这样的：

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" /> 
    <script type="text/javascript"> 
     angular.module('myApp', []); 

    angular.element(document).ready(function() { 
     angular.bootstrap(document, ['myApp']); 
    }); 
    </script> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

虽然这似乎是目前一个合适的解决办法，我仍然希望知道是什么问题...

来源

2014-04-20 18:52:54 yankee

一个做，这是最好的方法使用HTML/XHTML data-属性。您可以编写有效的HTML和XHTML，而不必包含任何角度名称空间。这将是如下：

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app=""> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" /> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

这也是有益的，当涉及到所有其他角度的声明，如ng-repeat和ng-show等

<div ng-repeat="item in items">{{item.name}}</div> // This won't validate. 
<div data-ng-repeat="item in items">{{item.name}}</div> // This will validate.

注意，与自举角应用解决方案也是有效的 - 但它不是真的解决了你遇到的问题。（它只是用不同的方式来加载你的角度应用程序，它发生在你的情况下工作，因为你没有在你的标记任何其他ng-指令。）

看到类似的问题和答案here.

来源

2014-11-02 14:40:43

如何结合angularjs和xhtml？

回答

相关问题