ng-app so với data-ng-app, sự khác biệt là gì?

230

Tôi hiện đang xem video hướng dẫn bắt đầu này choangular.js

Tại một số thời điểm (sau 12'40" ), các tiểu bang loa rằng các thuộc tính ng-appvà data-ng-app=""ít nhiều tương đương bên trong <html>thẻ, và như vậy là ng-model="my_data_bindingvà data-ng-model="my_data_binding". Tuy nhiên Người nói nói html sẽ được xác nhận qua xác nhận khác nhau, tùy thuộc vào thuộc tính là đã sử dụng.

Bạn có thể giải thích sự khác biệt giữa hai cách, ng-tiền tố so với data-ng-tiền tố?

html angularjs

— Stephane Rolland
nguồn

2

sự trùng lặp có thể có của sự khác biệt giữa ng-app và data-ng-app là gì?

— Bob Jarvis - Phục hồi Monica

403

Câu hỏi hay. Sự khác biệt rất đơn giản - hoàn toàn không có sự khác biệt giữa hai 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ư thế ng-app, nhưng chúng không gây ra lỗi cho bất kỳ thứ gì có tiền tố data-, như data-ng-app.

Vì vậy, để trả lời câu hỏi của bạn, hãy sử dụng data-ng-appnếu bạn muốn xác thực HTML của mình dễ dàng hơn một chút.

Sự thật thú vị: Bạn cũng có thể sử dụng x-ng-appđể có hiệu quả tương tự.

— Mã thì thầm
nguồn

4

Tiền tố dữ liệu có bao giờ ngăn một thuộc tính ng hoạt động đúng không? (ví dụ: "dữ liệu-ng-lặp lại")?

— giai điệu

3

Có vẻ như rất lãng phí các chu kỳ CPU để tự tháo data-và x-. Tại sao các quy tắc xác thực HTML không thể được thay đổi để chấp nhận ng-công cụ?

— DaveAlger

8

@DaveAlger: data-*thuộc tính là cách để mở rộng HTML .

— sampathsris

1

@DaveAlger: Đó là một ý tưởng tồi để làm như bạn đã nói. Nếu có nhiều công cụ nổi tiếng như Angular bên ngoài với tiền tố khác nhau, bạn muốn HTML đó theo tất cả chúng để thêm tiền tố của chúng?!?! Như Krumia đã nói đó là cách để mở rộng HTML.

— Dassi Mitcheando

65

Từ tài liệu Angularjs

Angular bình thường hóa thẻ của một thành phần và tên thuộc tính để xác định thành phần nào khớp với chỉ thị nào. Chúng tôi thường đề cập đến các chỉ thị theo tên chuẩn hóa camelCase phân biệt chữ hoa chữ thường (ví dụ ngModel). Tuy nhiên, do HTML không phân biệt chữ hoa chữ thường, chúng tôi đề cập đến các lệnh trong DOM bằng các dạng chữ thường, thường sử dụng các thuộc tính được phân cách bằng dấu gạch ngang trên các phần tử DOM (ví dụ: mô hình ng).

Quá trình chuẩn hóa như sau:

Dải x- và dữ liệu- từ phía trước của phần tử / thuộc tính. Chuyển đổi tên :, - hoặc hoặc được phân cách bằng _ thành camelCase. Dưới đây là một số ví dụ tương đương với các yếu tố phù hợp với ngBind:

dựa trên tuyên bố trên dưới đây là tất cả các chỉ thị hợp lệ

1. ng-bind
2. ng: bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

— srinu
nguồn

Nhưng nó làm điều này chỉ để so sánh với tên chỉ thị. Nó không thay đổi thuộc tính thực tế.

— RetroCoder

3

Rất tốt để biết về ký hiệu

— Code Whisperer

29

Sự khác biệt nằm ở chỗ các data-*thuộc tính tùy chỉnh có giá trị trong đặc tả HTML5 . Vì vậy, nếu bạn cần đánh dấu của bạn để được xác nhận, bạn nên sử dụng chúng hơn là các ngthuộc tính.

— Manu Letroll
nguồn

1

Tôi hiểu từ đặc tả rằng data- * sẽ hoạt động vì nó chỉ xác nhận html. Nhưng tại sao x- * sẽ hoạt động? họ không có bất kỳ mô tả nào về điều này trong đặc tả.

— Bhramar 10/07/2015

1

x- * được dành riêng để sử dụng bởi trình duyệt. Đối với câu hỏi của bạn về WHY x hoạt động, một trong hai sẽ hoạt động như một góc cụ thể đảm bảo rằng nó hoạt động cho cả dữ liệu / x bằng cách mã hóa nó vào khung của chúng. Nếu bạn đang hỏi TẠI SAO x làm việc cho góc cạnh, đó là một cuộc tranh luận khác. Có những lý lẽ tốt cho một trong hai. Xem câu trả lời này trên SO: stackoverflow.com/a/17902387/339804 Câu trả lời khác trên trang đó dường như nghĩ x là dành cho XHTML, nhưng tôi không chắc chắn. Xem những gì bạn có thể làm cho điều đó sau khi đọc tất cả. Thông số HTML5 cũng cho biết trình duyệt / nhà cung cấp sử dụng: w3.org/html/wg/dcraft/html/master/single-page.html

— redfox05

15

Câu trả lời ngắn:

ng-modelvà data-ng-modelgiống nhau và tương đương!

Tại sao?

lý do: data- tiền tố
đặc tả HTML5 mong muốn bất kỳ thuộc tính tùy chỉnh nào được tiền tố bởi data-.
lý do cho: cả ng-modelvàdata-ng-model giống nhau và tương đương.

Tài liệu AngularJS - Chuẩn hóa

Angular chuẩn hóa thẻ thuộc tính và tên thuộc tính để xác định thành phần nào khớp với chỉ thị nào. Chúng tôi thường đề cập đến các chỉ thị theo tên chuẩn hóa camelCase phân biệt chữ hoa chữ thường của chúng (ví dụ ngModel). Tuy nhiên, do HTML không phân biệt chữ hoa chữ thường, chúng tôi đề cập đến các lệnh trong DOM bằng các dạng chữ thường, thường sử dụng các thuộc tính được phân cách bằng dấu gạch ngang trên các phần tử DOM (ví dụ ng-model).

Quá trình chuẩn hóa như sau:
1. Dải x-và data-từ phía trước của phần tử / thuộc tính.
2. Chuyển đổi tên :, -hoặc _tên giới hạn thành các dạng sau đây đều tương đương và khớp với chỉ thị ngBind:camelCase .

Ví dụ

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>

— Xoáy
nguồn

2

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

— NNaseet
nguồn

2

OP hiểu rằng chúng có thể được sử dụng thay thế cho nhau, nhưng muốn biết tại sao hai cái này có sẵn nếu chúng hoạt động "giống nhau". Tôi tin rằng một lời giải thích về những gì làm cho họ khác biệt sẽ là một câu trả lời có giá trị hơn.

— Charles Watson

1

nếu bạn muốn thao tác các đoạn html hoặc html trên máy chủ của mình trước khi phục vụ nó cho trình duyệt, bạn chắc chắn muốn sử dụng các thuộc tính data-ng-xxx thay vì chỉ các thuộc tính ng-xxx.

Nó làm cho html của bạn hợp lệ, có nghĩa là nó có thể được sử dụng bởi các trình phân tích cú pháp html (dựa trên máy chủ) như domdocument (php) hoặc các loại khác. Những trình phân tích cú pháp này thường thất bại trên html không được hình thành tốt.
Angular bình thường hóa thuộc tính, nhưng hãy nhớ, đó là trên máy khách, không phải trên máy chủ.

— Kees Hessels
nguồn