Làm thế nào để kết hợp angularjs và xhtml?

Dưới đây là một ví dụ về một ví dụ nhỏ cho angularjs mà hoạt động khi lưu lại dưới dạng angular.html:Làm thế nào để kết hợp angularjs và 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>

Tuy nhiên tôi tin tưởng mạnh mẽ trong XML và tôi muốn tạo ra tất cả các văn bản html của tôi XML tuân thủ. Tôi cố gắng để thích nghi với ví dụ và lưu nó như 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>

Những thay đổi lớn là xhtml-Namespace và phần mở rộng tập tin ".xhtml". Không có lỗi hay gì cả. Nó chỉ là trang được hiển thị như thể góc không có mặt.

Làm thế nào để tôi có được các angularj làm việc với tệp tuân thủ XML?

Nguồn

2014-04-20 yankee

Bạn đang sử dụng HTML5 thay vì [Docotype] XHTML (http://www.w3.org/QA/2002/04/valid-dtd-list.html). –

@ klingt.net: Theo hiểu biết của tôi, điều này phù hợp với đặc tả html xác định loại tài liệu được khuyến nghị và cũng cho phép phân phối tài liệu HTML5 với ứng dụng loại nội dung/xhtml + xml. – yankee

Tôi đã tìm thấy giải pháp bằng cách sử dụng thiết lập thủ công. Đoạn mã sau đó trông như thế này:

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

Trong khi điều này có vẻ như một cách giải quyết thích hợp cho bây giờ, tôi vẫn rất muốn biết vấn đề là gì ...

Nguồn

2014-04-20 18:52:54 yankee

Một trong những cách tốt nhất để làm điều này là để sử dụng thuộc tính HTML/XHTML data-. Bạn có thể viết HTML và XHTML hợp lệ mà không cần phải bao gồm bất kỳ không gian tên góc nào. Đây sẽ là như sau:

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

này cũng có lợi khi nói đến tất cả các tờ khai kiễu góc khác, chẳng hạn như ng-repeat và ng-show vv

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

Lưu ý rằng giải pháp của bạn với bootstrapping ứng dụng kiễu góc cũng hợp lệ - nhưng nó không thực sự là một sửa chữa cho vấn đề bạn đang gặp phải. (Nó chỉ đơn giản là một cách khác nhau để tải ứng dụng kiễu góc của bạn, mà đã xảy ra để làm việc cho tình hình của bạn kể từ khi bạn không có bất kỳ ng- chỉ thị khác trong đánh dấu của bạn.)

Xem câu hỏi tương tự và trả lời here.

Nguồn

2014-11-02 14:40:43

Làm thế nào để kết hợp angularjs và xhtml?

Trả lời

Các vấn đề liên quan