Dyrektywa AngularJS Ograniczenie kontra E

Pracuję w małym zespole, budując w AngularJS i próbując zachować podstawowe standardy & najlepsze praktyki; szczególnie biorąc pod uwagę, że jesteśmy stosunkowo nowi z Angular.Dyrektywa AngularJS Ograniczenie kontra E

Moje pytanie dotyczy dyrektyw. Dokładniej, opcje restrict.

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

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

Następnie, oczywiście, można użyć restrict: 'EA' i użyć jednego z powyższych.

W tej chwili to nic wielkiego, ale kiedy projekt jest tak duży, jak to tylko możliwe, chciałbym, aby każdy, kto na niego patrzył, z łatwością zrozumiał, co się dzieje.

Czy istnieją zalety/wady zarówno dla sposobu działania, jak i elementu?

Czy są jakieś pułapki, które powinniśmy znać, wybierając element "powiedz ponad atrybutem"?

Źródło

2014-04-22 Darren

Według the documentation:

Kiedy należy używać atrybutu porównaniu elementu? Użyj elementu, gdy tworzysz komponent kontrolujący szablon. Wspólny przypadek to , gdy tworzysz język specyficzny dla domeny dla części szablonu. Użyj atrybutu, gdy dekorujesz istniejący element nowymi funkcjami.

Edit następujący komentarz na temat pułapek dla pełnej odpowiedzi:

Zakładając, że budujemy aplikację, która powinna działać na Internet Explorer < = 8, których wsparcie zostało upuszczone przez zespół angularjs z angularjs 1.3 , musisz wykonać następujące instrukcje, aby działało: https://docs.angularjs.org/guide/ie

Źródło

2014-04-22 13:28:31 blint

Czytałem te dokumenty w górę iw dół, ale tęskniłem za tym :) dzięki. – Darren

Nie ma za co Darren, tak się dzieje. Powodzenia! – blint

To wyjaśnienie nie obejmuje żadnych pułapek i plusów/minusów. –

Jedną z pułapek, o której mi wiadomo, jest problem z IE z elementami niestandardowymi. Jak cytat z docs:

3) ty nie wykorzystanie niestandardowych znaczników elementów takich jak (używać wersji atrybutu zamiast)

4) jeśli zrobić używać tagów niestandardowych elementów, a następnie należy podjąć kroki, aby uczynić IE 8 i poniżej szczęśliwym

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

Źródło

2014-04-22 13:29:47

elementem, nie są obsługiwane w IE8 po wyjęciu z pudełka, musisz zrobić trochę pracy, aby IE8 akceptował niestandardowe znaczniki.

Jedną z zalet używania atrybutu nad elementem jest możliwość zastosowania wielu dyrektyw do tego samego węzła DOM.Jest to szczególnie przydatne w przypadku takich elementów, jak formanty formularzy, w których można wyróżnić, wyłączyć lub dodać etykiety itp. Z dodatkowymi atrybutami bez konieczności zawijania elementu w garść tagów.

Źródło

2014-04-22 13:30:35

2 problemy z elementów:

Bad wsparcie ze starymi przeglądarkami.
SEO - silnik Google ich nie lubi.

Użyj atrybutów.

Źródło

2014-04-22 13:31:52

Dyrektywy jako elementy mogą powodować problemy z pozycjonowaniem? Jestem zaskoczony. A co z atrybutem 'replace' na' true'? – chalasr

Te twierdzenia wymagają referencji. Punkt 1 jest dość dobrze ugruntowany gdzie indziej, ale chciałbym zobaczyć źródła o Punkcie 2. – rinogo

Pitfall:

Używanie własnego elementu HTML, jak <my-directive></my-directive> przyzwyczajenie praca na IE8 bez obejścia (https://docs.angularjs.org/guide/ie)
z wykorzystaniem własnych elementów HTML uczyni walidacja html niepowodzeniem.
Dyrektywy z równym jednego parametru można zrobić tak:

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

Zamiast tego:

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

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

Każda dyrektywa o ramach trzeciej strony można zapisać na dwa sposoby:

<my-directive></my-directive>

lub

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

robi to samo.

Źródło

2014-04-22 13:32:31

Jaki jest twój sens przy 3? – zeroflagL

Jeśli chcesz utworzyć dyrektywę z równym 1 parametrem zakresu, łatwiej jest zrobić to za pomocą A. Ponieważ nie musisz tworzyć dodatkowego atrybutu. –

Co masz na myśli przez dodatkowe? Obie alternatywy mają dokładnie jeden atrybut. – zeroflagL

ograniczyć możliwość jest zwykle ustawiony:

'A' - przypisanie tylko odpowiada nazwie
'E' - tylko odpowiada nazwie elementu
'C' - tylko odpowiada nazwie klasy
"M" - tylko mecze komentarz

Oto documentation link.

Źródło

2015-04-24 07:53:56

to było naprawdę przydatne, dzięki! –

proste i czyste –

119

ograniczać się do określenia rodzaju dyrektywy i może być A (atrybut), C (Class), E (Element) i M (komentarz), załóżmy, że nazwa tej dyrektywy jest Doc:

Typ: Wykorzystanie

A = <div Doc></div>

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

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

M = 

Źródło

2015-10-23 13:53:00

mniej jasne niż odpowiedź @nikunj, ale po zobaczeniu ich odpowiedzi rozumiem twoje ... –

W prawne ograniczające wartości:

E dla Nazwa elementu
A atrybutu
C klasy
M dla Komentarz

Domyślnie jest to EA, co oznacza, że zarówno nazwy elementów, jak i nazwy atrybutów mogą wywoływać dyrektywę.

Źródło

2017-01-04 11:53:10

Dyrektywa AngularJS Ograniczenie kontra E

Odpowiedz

Powiązane problemy