Dyrektywa AngularJS Ogranicz A vs E.

113

Pracuję w małym zespole, buduję w AngularJS i staram się utrzymać kilka podstawowych standardów i najlepszych praktyk; zwłaszcza biorąc pod uwagę, że jesteśmy stosunkowo nowi w Angular.

Moje pytanie dotyczy dyrektyw. Dokładniej, restrictopcje.

Niektórzy z nas używają restrict: 'E'tego <my-directive></my-directive>w html.

Inni używają restrict: 'A'i mają <div my-directive></div>w html.

Następnie możesz oczywiście restrict: 'EA'użyć dowolnego z powyższych.

W tej chwili to nic wielkiego, ale kiedy ten projekt jest tak duży, jak będzie, chciałbym, żeby każdy, kto na niego spojrzał, łatwo zrozumiał, co się dzieje.

Czy istnieją wady / zalety atrybutu lub elementu sposobu robienia rzeczy?

Czy są jakieś pułapki, które powinniśmy wiedzieć, wybierając powiedz element zamiast atrybutu?

javascript html angularjs Darren Wainwright
źródło

Odpowiedzi:

100

Zgodnie z dokumentacją :

Kiedy powinienem używać atrybutu, a kiedy elementu? Użyj elementu podczas tworzenia komponentu, który kontroluje szablon. Typowym przypadkiem jest to, gdy tworzysz język specyficzny dla domeny dla części szablonu. Użyj atrybutu, gdy dekorujesz istniejący element nową funkcjonalnością.

Edytuj następujący komentarz dotyczący pułapek, aby uzyskać pełną odpowiedź:

Zakładając, że tworzysz aplikację, która powinna działać w przeglądarce Internet Explorer <= 8, której wsparcie zostało wycofane przez zespół AngularJS z AngularJS 1.3, musisz postępować zgodnie z poniższymi instrukcjami, aby działała: https: //docs.angularjs .org / guide / ie

ngasull
źródło
3
Czytałem w górę iw dół te dokumenty, ale przegapiłem ten :) dzięki.
Darren Wainwright
3
To wyjaśnienie nie obejmuje żadnych pułapek ani zalet / wad.
Konstantin Krass
Zaktualizowałem odpowiednio moją odpowiedź o pułapkach. Nie wspomniałem o zaletach / wadach, ponieważ myślę, że mówimy tutaj bardziej o najlepszych praktykach, zwłaszcza gdy są polecane i wyjaśniane przez zespół Angular.
ngasull
1
„Nie wspomniałem o zaletach / wadach, ponieważ myślę, że bardziej mówimy tutaj o najlepszych praktykach, zwłaszcza gdy są zalecane i wyjaśniane przez zespół Angular”. co? :)
Alexander Mills,
169

Restrykcja służy do definiowania typu dyrektywy i może to być A(Atrybut), C(Klasa), E(Element) i M(CoMment), załóżmy, że nazwa dyrektywy to Doc:

Typ: użycie

A = <div Doc></div>

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

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

M = <!--directive:Doc -->

Seif Tamallah
źródło
2
mniej jasne niż odpowiedź @nikunj, ale po zobaczeniu ich odpowiedzi rozumiem twoją ...
Alexander Mills.
47

Opcja ograniczenia jest zwykle ustawiona na:

  • „A” - pasuje tylko do nazwy atrybutu
  • „E” - pasuje tylko do nazwy elementu
  • „C” - pasuje tylko do nazwy klasy
  • „M” - pasuje tylko do komentarza

Oto link do dokumentacji .

nikunj gandhi
źródło
proste i czyste
Gaurav_0093
7

Element nie jest obsługiwany w IE8 po wyjęciu z pudełka, musisz trochę popracować, aby IE8 akceptował niestandardowe tagi.

Jedną z zalet używania atrybutu zamiast elementu jest to, że możesz zastosować wiele dyrektyw do tego samego węzła DOM. Jest to szczególnie przydatne w przypadku elementów takich jak kontrolki formularzy, w których można podświetlać, wyłączać lub dodawać etykiety itp. Z dodatkowymi atrybutami bez konieczności zawijania elementu w kilka znaczników.

Jack Allan
źródło
5

Jak wiem, jedną z pułapek jest problem IE z niestandardowymi elementami. Jak cytowano z dokumentów :

3) nie używasz niestandardowych tagów elementów, takich jak (zamiast tego użyj wersji atrybutu)

4) jeśli używasz niestandardowych tagów elementów, musisz wykonać następujące kroki, aby IE 8 i poniżej były szczęśliwe

<!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
źródło
4

Pułapka:

  1. Używanie własnego elementu html, na przykład, <my-directive></my-directive>nie działa w IE8 bez obejścia ( https://docs.angularjs.org/guide/ie )
  2. Użycie własnych elementów HTML spowoduje niepowodzenie walidacji HTML.
  3. Dyrektywy z równym jednym parametrem można zrobić w następujący sposób:

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

Zamiast tego:

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

My nie zastosowania niestandardowych elementów HTML, bo jeśli to 2 fakty.

Każdą dyrektywę platformy zewnętrznej można napisać na dwa sposoby:

<my-directive></my-directive>

lub

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

robi to samo.

Konstantin Krass
źródło
1
jeśli chcesz utworzyć dyrektywę z równym 1 parametrem zasięgu, łatwiej to zrobić za pomocą A. Ponieważ nie musisz tworzyć dodatkowego atrybutu.
Konstantin Krass
Co masz na myśli mówiąc dodatkowe? Obie alternatywy mają dokładnie jeden atrybut.
lepszy oliver
3

2 problemy z elementami:

  1. Zła obsługa starych przeglądarek.
  2. SEO - silnik Google ich nie lubi.

Użyj atrybutów.

Amir Popovich
źródło
Dyrektywy jako elementy mogą powodować problem z pozycjonowaniem? Jestem zaskoczony. A co z replaceatrybutem true?
chalasr
1
Te twierdzenia wymagają referencji. Punkt 1 jest dość dobrze ugruntowany gdzie indziej, ale chciałbym zobaczyć źródła o punkcie 2.
rinogo