ng-app vs. data-ng-app, jaka jest różnica?

230

Obecnie patrzę na ten film instruktażowy dotyczący początkuangular.js

W pewnym momencie (po 12'40 ") mówca oświadcza, że ​​atrybuty ng-appi data-ng-app=""są mniej więcej równoważne wewnątrz <html>znacznika, podobnie jak ng-model="my_data_bindingi data-ng-model="my_data_binding". Jednak mówca mówi, że HTML zostanie sprawdzony za pomocą różnych walidatorów, w zależności od tego, który atrybut jest używany.

Czy mógłbyś wyjaśnić różnicę między tymi dwoma sposobami, ng-prefiks przed data-ng-prefiksem?

html angularjs Stephane Rolland
źródło
2
możliwy duplikat Jaka jest różnica między ng-app a data-ng-app?
Bob Jarvis - Przywróć Monikę

Odpowiedzi:

403

Dobre pytanie. Różnica jest prosta - nie ma absolutnie żadnej różnicy między tymi dwoma, z wyjątkiem tego, że niektóre walidatory HTML5 rzucają błąd na właściwość taką jak ng-app, ale nie zgłaszają błędu dla czegoś z prefiksem data-, jak data-ng-app.

Aby odpowiedzieć na twoje pytanie, użyj, data-ng-appjeśli chcesz, aby weryfikacja kodu HTML była nieco łatwiejsza.

Ciekawostka: możesz użyć x-ng-apptego samego efektu.

Zaklinacz kodów
źródło
4
Czy prefiks danych kiedykolwiek uniemożliwiłby prawidłowe działanie atrybutu ng? (np. „data-ng-repeat”)?
tonejac
3
Wydaje się, że marnowanie cykli procesora powoduje ręczne usuwanie data-i x-. Dlaczego nie można zmienić reguł sprawdzania poprawności HTML, aby akceptować ng-różne elementy?
DaveAlger
8
@DaveAlger: data-*atrybuty są sposobem na rozszerzenie HTML .
sampathsris,
1
@DaveAlger: Robienie tego, co powiedziałeś, jest złym pomysłem. Jeśli istnieje wiele znanych narzędzi, takich jak Angular, z innym prefiksem, chcesz, aby HTML śledził je wszystkie, aby dodać ich prefiks?!?! Jak powiedział Krumia, jest to sposób na rozszerzenie HTML.
Dassi Orleando
65

Z dokumentacji Angularjs

Angular normalizuje znacznik elementu i nazwę atrybutu, aby określić, które elementy pasują do których dyrektyw. Zazwyczaj odniesienia do dyrektyw odnoszą się do ich znormalizowanej nazwy camelCase (np. NgModel). Ponieważ jednak HTML nie rozróżnia wielkości liter, odwołujemy się do dyrektyw w DOM przez formy pisane małymi literami, zwykle używając atrybutów rozdzielanych myślnikiem na elementach DOM (np. Model ng).

Proces normalizacji przebiega następująco:

Usuń x i dane z przodu elementu / atrybutów. Konwertuj:: - - lub _-delimited name na camelCase. Oto kilka równoważnych przykładów elementów pasujących do ngBind:

na podstawie powyższego oświadczenia poniżej wszystkie są ważnymi dyrektywami

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

srinu
źródło
Ale robi to tylko w celu porównania z nazwą dyrektywy. To nie zmienia faktycznego atrybutu.
RetroCoder
3
Dobrze wiedzieć o notacji
Code Whisperer
29

Różnice polegają na tym, że niestandardowe data-*atrybuty są prawidłowe w specyfikacji HTML5 . Dlatego jeśli chcesz sprawdzić poprawność znaczników, powinieneś ich używać zamiast ngatrybutów.

Manu Letroll
źródło
1
Rozumiem ze specyfikacji, że data- * będzie działać, ponieważ tylko sprawdza poprawność HTML. Ale dlaczego x- * miałoby działać? nie ma w tym opisie.
Bhramar,
1
x- * jest zarezerwowane do użytku przez przeglądarkę. Jeśli chodzi o pytanie, DLACZEGO x działa, każdy z nich będzie działał jako kątowy, upewniając się, że działa albo dla danych / x, kodując go w swojej strukturze. Jeśli pytasz DLACZEGO x działa dla kąta, to jest kolejna debata. Istnieją albo dobre argumenty. Zobacz tę odpowiedź na SO: stackoverflow.com/a/17902387/339803 Inna odpowiedź na tej stronie wydaje się myśleć, że x dotyczy XHTML, ale nie jestem pewien. Zobacz, co możesz z tego zrobić po przeczytaniu wszystkiego. Specyfikacja HTML5 mówi także o użyciu przeglądarki / dostawcy: w3.org/html/wg/drafts/html/master/single-page.html
redfox05
15

Krótka odpowiedź:

ng-modeli data-ng-modelsą takie same i równoważne!

Czemu?

  1. powód: data- przedrostek
    Specyfikacja HTML5 oczekuje, że dowolny niestandardowy atrybut będzie poprzedzony data-.

  2. Powodem: zarówno ng-modeli data-ng-modelsą takie same i równoważne.

Dokument AngularJS - Normalizacja

Angular normalizuje znacznik elementu i nazwę atrybutu, aby określić, które elementy pasują do których dyrektyw. Zazwyczaj odniesienia do dyrektyw odnoszą się do ich znormalizowanej nazwy camelCase (np ngModel.). Ponieważ jednak HTML nie rozróżnia wielkości liter, odwołujemy się do dyrektyw w DOM za pomocą małych liter, zwykle używając atrybutów rozdzielanych myślnikiem na elementach DOM (np ng-model.).

Proces normalizacji w następujący sposób:
1. Usunąć x-i data-z przodu elementów / cech.
2. Konwersja :, -lub _-delimited nazwę camelCase.

Na przykład
następujące formularze są równoważne i zgodne z dyrektywą ngBind:

<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>
Wir
źródło
2

Możesz użyć data-ng-, zamiast ng-, jeśli chcesz, aby strona HTML była poprawna.

NNaseet
źródło
2
OP rozumie, że można ich używać zamiennie, ale chce wiedzieć, dlaczego są one dostępne, jeśli działają „tak samo”. Uważam, że wyjaśnienie tego, co je odróżnia, byłoby bardziej wartościową odpowiedzią.
Charles Watson,
1

jeśli chcesz manipulować fragmentami HTML lub HTML na swoim serwerze przed udostępnieniem go w przeglądarce, zdecydowanie chcesz używać atrybutów data-ng-xxx zamiast tylko atrybutów ng-xxx.

  1. Sprawia, że ​​twój HTML jest prawidłowy, co oznacza, że ​​może być używany przez parsery HTML (oparte na serwerze), takie jak DomDocument (PHP) lub inne. Te parsery często zawodzą w źle sformatowanym HTML.
  2. Angular normalizuje atrybut, ale pamiętaj, że to na kliencie, a nie na serwerze.
Kees Hessels
źródło