Sự khác biệt giữa ng-app và data-ng-app là gì?

147

Tôi đã bắt đầu tìm hiểu về AngularJS và bối rối về sự khác biệt giữa các chỉ thị ng-appvà data-ng-appchỉ thị.

angularjs angularjs-directive

— người dùng1876508
nguồn

7

có thể trùng lặp ng-app so với data-ng-app, sự khác biệt là gì?

— chenrui 3/2/2015

8

@chenrui - Q này đến btw đầu tiên. (24 tháng 4 so với 16 tháng 5)

— Nhà triết học ngớ ngẩn

1

Ứng dụng của bạn sẽ không bị ảnh hưởng và Angular sẽ hoạt động như mong đợi ngay cả khi bạn sử dụng ng-app hoặc data-ng-app nhưng như được đề cập bởi @ user2289659, sử dụng dữ liệu- * được giới thiệu tiêu chuẩn thuộc tính tùy chỉnh từ HTML5 trở đi

— Shujaath Khan

125

Hầu hết các câu trả lời này chỉ đơn giản là làm cho mẫu HTML hợp lệ hoặc tuân thủ Trình xác thực HTML , mà không giải thích các thuật ngữ THOSE có nghĩa là gì.

Tôi không biết chắc chắn, nhưng tôi đoán rằng các điều khoản này áp dụng cho các chương trình xác thực HTML quét mã của bạn để tuân thủ các tiêu chuẩn - giống như lint. Họ không công nhận ng-applà một thuộc tính hợp lệ. Họ hy vọng các thuộc tính HTML không mặc định sẽ được mở đầu bằng

data-attribute_name_here.

Vì vậy, những người tạo ra AngularJSđã tạo ra các tên thay thế cho các chỉ thị của họ bao gồm data-phía trước chúng để các chương trình xác thực HTML sẽ "thích" chúng.

— Kirby L. Wallace
nguồn

4

+1 cho "Ok. Vì vậy, 'tuân thủ trình xác nhận' nghĩa là gì?" tiếp cận. Nếu bạn đã thực hiện nghiên cứu, bạn sẽ thấy rằng bạn đang đoán gần đúng. =)

— slacktracer

22

HTML hợp lệ không dành cho trình xác nhận HTML. Trình duyệt phân tích HTML. Nếu bạn bắt đầu đi chệch khỏi đặc tả HTML, không có gì đảm bảo rằng HTML của bạn sẽ được phân tích cú pháp chính xác.

— Máy xay sinh tố

1

Vâng, các trình xác nhận là một phương tiện đến cùng. Mục tiêu là làm cho các trang web của bạn càng gần càng tốt với thông số kỹ thuật, giúp tối đa hóa số lượng trình duyệt - cũ, hiện tại và tương lai - trong đó ứng dụng của bạn sẽ thực sự hoạt động như mong đợi. Trong trường hợp "data- *", các trình duyệt rủi ro cũng có thể giới thiệu thuộc tính tương tự như một tiêu chuẩn, sẽ va chạm với thuộc tính của ứng dụng của bạn. Ngoài ra, việc tuân thủ các tiêu chuẩn như thế này sẽ giúp các công cụ (ví dụ: biên tập viên) hiểu ý nghĩa của nó và làm cho chúng hữu ích hơn với bạn.

— mahemoff

2

@Blender "không có gì đảm bảo rằng HTML của bạn sẽ được phân tích cú pháp chính xác", điều tương tự cũng có thể nói với HTML hợp lệ.

— twiz

1

@Chuck Tôi không đề nghị bạn làm theo cách này hay cách khác, chỉ là vấn đề không đặc biệt quan trọng. Chúng tôi cũng có thể tranh luận về không gian và các tab trong khi chúng tôi đang ở đó. haha

— twiz

41

Không có gì về hành vi thời gian chạy, đó chỉ là những cách đặt tên khác nhau như được mô tả ở đây: http://docs.angularjs.org/guide/directive

Chỉ thị có tên vỏ lạc đà như ngBind. Lệnh này có thể được gọi bằng cách dịch tên trường hợp lạc đà thành trường hợp rắn với các ký tự đặc biệt này :, - hoặc _. Tùy chọn chỉ thị có thể được bắt đầu bằng x- hoặc dữ liệu - để làm cho trình xác thực HTML tuân thủ. Dưới đây là danh sách một số tên chỉ thị có thể có: ng: bind, ng-bind, ng_bind, x-ng-bind và data-ng-bind.

Như bạn có thể thấy từ việc đọc này, data-có thể được sử dụng để làm cho HTML của bạn vượt qua các bài kiểm tra trình xác thực HTML /

— pkozlowski.opensource
nguồn

2

Trường hợp trong đặc tả của HTML cho phép điều này?

— dùng1876508

3

@ user1876508: w3.org/TR/2011/WD-html5-20110525/

— Kẻ

6

Bạn có thể khai báo không gian tên góc <html xmlns:ng="http://angularjs.org" ng-app>

— Mounir
nguồn

2

Điều này dường như chỉ áp dụng cho các ứng dụng cũ: "Nếu bạn chọn sử dụng cú pháp chỉ thị kiểu cũ ng: thì hãy bao gồm không gian tên xml trong html để làm cho IE hài lòng. (Đây là lý do lịch sử và chúng tôi không còn khuyến nghị sử dụng ng :.) ". Nguồn: docs.angularjs.org/guide/bootstrap

— Chuck Le Mông

5

Trong các trình duyệt hiện đại không có sự khác biệt, nhưng trong các IE cũ hơn, chúng sẽ không hoạt động trừ khi bạn khai báo một không gian tên XML xác định nó.

Ngoài ra còn có một sự khác biệt về xác thực trong đó ng-appkhông phải là XHTML hợp lệ và sẽ khiến trang web của bạn không thể xác thực HTML. Angular cho phép bạn thêm tiền tố vào các chỉ thị của nó bằng data-hoặc x-cho phép nó xác nhận.

— abject_error
nguồn

Điều này dường như chỉ đúng nếu bạn đang sử dụng "ng:". Tôi tin rằng "dữ liệu-ng-" sẽ xác nhận.

— Chuck Le Mông

4

Bạn có thể sử dụng dữ liệu-ng-, thay vì ng-, nếu bạn muốn làm cho trang HTML của mình hợp lệ.
Điều này sẽ gây ra lỗi

<div ng-app="">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>

</div>

Điều này sẽ không gây ra lỗi

<div data-ng-app="scope" data-ng-init="name='test'">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" data-ng-model="name"></p>
  <p data-ng-bind="name"></p>

</div>

— Vahap Gencdal
nguồn

Bạn có thể giải thích tại sao kịch bản đầu tiên sẽ gây ra lỗi không?

— Awani

Đây là tham chiếu xác nhận w3c.

— Graham P Heath

3

Sự khác biệt cơ bản giữa hai thuật ngữ này là dữ liệu-ng-app xác nhận HTML trong khi thuật ngữ sau không. Chức năng vẫn giữ nguyên. Để tham khảo thêm, bạn có thể thử w3Validator.

— Abhishek Gakhar
nguồn

-2

Hoàn toàn không có sự khác biệt giữa hai loại này, ngoại trừ một số trình xác thực HTML5 nhất định sẽ gây ra lỗi trên một thuộc tính như ng-app, nhưng chúng không gây ra lỗi cho bất kỳ thứ gì có tiền tố- như data-ng-app. Vì vậy, sử dụng tiền tố dữ liệu với các chỉ thị góc của chúng tôi là tốt.

Thậm chí bạn có thể sử dụng các chỉ thị góc trong các cách được đề cập dưới đây ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

— Vua Raj
nguồn