Chỉ thị AngularJS Hạn chế A vs E

113

Tôi đang làm việc trong một nhóm nhỏ, xây dựng trong AngularJS và cố gắng duy trì một số tiêu chuẩn cơ bản & các phương pháp hay nhất; đặc biệt là chúng tôi tương đối mới với Angular.

Câu hỏi của tôi là liên quan đến Chỉ thị. Chính xác hơn là các restricttùy chọn.

Một số người trong chúng ta đang sử dụng restrict: 'E'do đó có <my-directive></my-directive>trong html.

Những người khác đang sử dụng restrict: 'A'và có <div my-directive></div>trong html.

Sau đó, tất nhiên, bạn có thể sử dụng restrict: 'EA'và sử dụng một trong hai cách trên.

Hiện tại, đó không phải là vấn đề lớn, mặc dù khi dự án này lớn đến mức tôi sẽ mong muốn mọi người nhìn vào nó để dễ dàng hiểu chuyện gì đang xảy ra.

Có ưu / nhược điểm nào đối với cách hoạt động của thuộc tính hoặc phần tử không?

Có bất kỳ cạm bẫy nào chúng ta nên biết, nếu chọn nói phần tử thay vì thuộc tính không?

javascript html angularjs

— Darren Wainwright
nguồn

100

Theo tài liệu :

Khi nào tôi nên sử dụng một thuộc tính so với một phần tử? Sử dụng một phần tử khi bạn đang tạo một thành phần nằm trong quyền kiểm soát của mẫu. Trường hợp phổ biến cho điều này là khi bạn đang tạo Ngôn ngữ dành riêng cho miền cho các phần của mẫu của mình. Sử dụng một thuộc tính khi bạn đang trang trí một phần tử hiện có với chức năng mới.

Chỉnh sửa bình luận sau về các cạm bẫy để có câu trả lời hoàn chỉnh:

Giả sử bạn đang xây dựng một ứng dụng sẽ chạy trên Internet Explorer <= 8, người đã bị nhóm AngularJS loại bỏ hỗ trợ khỏi AngularJS 1.3, bạn phải làm theo các hướng dẫn sau để làm cho nó hoạt động: https://docs.angularjs .org / hướng dẫn / tức là

— ngasull
nguồn

3

Tôi đã đọc lên và xuống các tài liệu đó nhưng bỏ lỡ tài liệu này :) cảm ơn.

— Darren Wainwright

3

Lời giải thích này không bao hàm bất kỳ cạm bẫy và ưu / nhược điểm nào.

— Konstantin Krass

Cập nhật câu trả lời của tôi cho phù hợp về cạm bẫy. Tôi đã không đề cập đến ưu / nhược điểm vì tôi nghĩ chúng ta đang nói nhiều hơn về các phương pháp hay nhất ở đây, đặc biệt là khi được nhóm Angular đề xuất và giải thích.

— ngasull

1

"Tôi không đề cập đến ưu / nhược điểm vì tôi nghĩ chúng ta đang nói nhiều hơn về các phương pháp hay nhất ở đây, đặc biệt khi được nhóm Angular đề xuất và giải thích." Huh? :)

— Alexander Mills

169

giới hạn là để xác định loại chỉ thị và nó có thể là A(Thuộc tính), C(Lớp), E(Phần tử) và M(coMment), giả sử rằng tên của chỉ thị là Doc:

Loại: Sử dụng

A = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

— Seif Tamallah
nguồn

2

ít rõ ràng hơn câu trả lời bằng cách @nikunj, nhưng sau khi nhìn thấy câu trả lời của họ Tôi hiểu bạn ...

— Alexander Mills

47

Tùy chọn hạn chế thường được đặt thành:

'A' - chỉ khớp với tên thuộc tính
'E' - chỉ khớp với tên phần tử
'C' - chỉ khớp với tên lớp
'M' - chỉ phù hợp với nhận xét

Đây là liên kết tài liệu .

— nikunj gandhi
nguồn

đơn giản và sạch sẽ

— Gaurav_0093

7

Phần tử không được hỗ trợ trong IE8, bạn phải làm một số công việc để IE8 chấp nhận các thẻ tùy chỉnh.

Một lợi thế của việc sử dụng một thuộc tính trên một phần tử là bạn có thể áp dụng nhiều chỉ thị cho cùng một nút DOM. Điều này đặc biệt hữu ích cho những thứ như điều khiển biểu mẫu, nơi bạn có thể đánh dấu, tắt hoặc thêm nhãn, v.v. với các thuộc tính bổ sung mà không cần phải bọc phần tử trong một loạt thẻ.

— Jack Allan
nguồn

5

Một trong những cạm bẫy mà tôi biết là vấn đề IE với các phần tử tùy chỉnh. Theo trích dẫn từ tài liệu :

3) bạn không sử dụng các thẻ phần tử tùy chỉnh như (sử dụng phiên bản thuộc tính thay thế)

4) nếu bạn sử dụng thẻ phần tử tùy chỉnh, thì bạn phải thực hiện các bước sau để làm cho IE 8 trở xuống hài lòng

<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <head>
      <!--[if lte IE 8]>
        <script>
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');

          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        </script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

— Khanh TO
nguồn

4

Cạm bẫy:

Sử dụng phần tử html của riêng bạn như <my-directive></my-directive>sẽ không hoạt động trên IE8 mà không có giải pháp thay thế ( https://docs.angularjs.org/guide/ie )
Việc sử dụng các phần tử html của riêng bạn sẽ làm cho việc xác thực html không thành công.
Các chỉ thị có một tham số bằng nhau có thể thực hiện như thế này:

<div data-my-directive="ValueOfTheFirstParameter"></div>

Thay vì điều này:

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

Chúng tôi không sử dụng các phần tử html tùy chỉnh, bởi vì nếu điều này 2 sự thật.

Mọi chỉ thị theo khuôn khổ của bên thứ ba có thể được viết theo hai cách:

<my-directive></my-directive>

hoặc là

<div data-my-directive></div>

làm như vậy.

— Konstantin Krass
nguồn

1

nếu bạn muốn tạo một chỉ thị có tham số phạm vi bằng 1, thì sẽ dễ dàng hơn để thực hiện với A. Vì bạn không phải tạo thêm một thuộc tính.

— Konstantin Krass

Bạn có nghĩa là gì khi bổ sung? Cả hai lựa chọn thay thế đều có chính xác một thuộc tính.

— một oliver tốt hơn

3

2 vấn đề với các phần tử:

Hỗ trợ kém với các trình duyệt cũ.
SEO - công cụ của Google không thích chúng.

Sử dụng Thuộc tính.

— Amir Popovich
nguồn

Chỉ thị là yếu tố có thể gây ra vấn đề SEO? Tôi ngạc nhiên. Và những gì về replacethuộc tính true?

— chalasr

1

Những tuyên bố này cần tham khảo. Điểm 1 là khá tốt được thành lập ở những nơi khác, nhưng tôi rất muốn nhìn thấy nguồn về điểm 2.

— rinogo