如何結合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？

回答

相關問題