ng-app vs. data-ng-app, qual è la differenza?

230

Attualmente sto guardando questo video tutorial di avvio perangular.js

Ad un certo momento (dopo 12'40 "), l'oratore afferma che gli attributi ng-appe data-ng-app=""sono più o meno equivalenti all'interno del <html>tag, e così sono ng-model="my_data_bindinge data-ng-model="my_data_binding". Tuttavia, l'oratore afferma che l'html verrà convalidato attraverso diversi validatori, a seconda dell'attributo Usato.

Potresti spiegare la differenza tra i due modi, ng-prefisso contro data-ng-prefisso?

html angularjs

— Stephane Rolland
fonte

2

possibile duplicato di Qual è la differenza tra ng-app e data-ng-app?

— Bob Jarvis - Ripristina Monica

403

Buona domanda. La differenza è semplice: non c'è assolutamente alcuna differenza tra i due, tranne per il fatto che alcuni validatori HTML5 generano un errore su una proprietà simile ng-app, ma non generano un errore per qualcosa con prefisso data-, come data-ng-app.

Quindi per rispondere alla tua domanda, usa data-ng-appse desideri che la convalida del tuo HTML sia un po 'più semplice.

Curiosità: puoi usare x-ng-applo stesso effetto.

— Whisperer di codice
fonte

4

Il prefisso dati impedirebbe mai a un attributo ng di funzionare correttamente? (ad es. "data-ng-repeat")?

— tonejac,

3

Sembra un tale spreco di cicli della CPU da rimuovere manualmente data-e x-. Perché le regole di convalida HTML non possono essere modificate per accettare elementi ng-?

— DaveAlger,

8

@DaveAlger: gli data-*attributi sono il modo per estendere l'HTML .

— sampathsris,

1

@DaveAlger: è una cattiva idea fare come hai detto. Se là fuori ci sono molti strumenti famosi come Angular con prefisso diverso, vuoi che HTML li segua tutti per aggiungere il loro prefisso?!?! Come Krumia ha detto, è il modo di estendere l'HTML.

— Dassi Orleando,

65

Dalla documentazione di Angularjs

Angolare normalizza il tag di un elemento e il nome dell'attributo per determinare quali elementi corrispondono a quali direttive. In genere ci riferiamo alle direttive per il loro nome normalizzato camelCase con distinzione tra maiuscole e minuscole (ad esempio ngModel). Tuttavia, poiché l'HTML non fa distinzione tra maiuscole e minuscole, ci riferiamo alle direttive nel DOM in forme minuscole, in genere utilizzando attributi delimitati da trattini su elementi DOM (ad esempio ng-model).

Il processo di normalizzazione è il seguente:

Elimina x e dati dalla parte anteriore dell'elemento / degli attributi. Convertire il nome delimitato da:, - o _ in camelCase. Ecco alcuni esempi equivalenti di elementi che corrispondono a ngBind:

in base alla dichiarazione di cui sopra, tutte le direttive sono valide

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

— Srinu
fonte

Ma lo fa solo per confrontare con il nome della direttiva. Non cambia l'attributo reale.

— RetroCoder,

3

Buono a sapersi della notazione

— Whisperer del codice

29

Le differenze risiedono nel fatto che gli data-*attributi personalizzati sono validi nella specifica HTML5 . Pertanto, se è necessario convalidare il markup, è necessario utilizzarli anziché gli ngattributi.

— Manu Letroll
fonte

1

Capisco dalle specifiche che data- * funzionerebbe in quanto convalida semplicemente l'html. Ma allora perché x- * funziona? non c'è alcuna descrizione al riguardo nella specifica.

— Bhramar,

1

x- * è riservato per l'uso da parte del browser. Per quanto riguarda la tua domanda su PERCHÉ x funziona, entrambi funzioneranno come angolari in modo specifico per assicurarsi che funzioni per entrambi i dati / x codificandolo nel loro framework. Se stai chiedendo PERCHÉ FUNZIONA x lavorare per angolare, questo è un altro dibattito. Ci sono buoni argomenti per entrambi. Vedi questa risposta su SO: stackoverflow.com/a/17902387/339803 L'altra risposta su quella pagina sembra pensare che x sia per XHTML, ma non ne sono sicuro. Scopri cosa puoi fare dopo aver letto tutto. La specifica HTML5 dice anche l'uso del browser / fornitore: w3.org/html/wg/drafts/html/master/single-page.html

— redfox05

15

Risposta breve:

ng-modele data-ng-modelsono uguali ed equivalenti!

Perché?

motivo per: data- prefisso La
specifica HTML5 prevede che ogni attributo personalizzato sia preceduto da data-.
motivo per: entrambi ng-modele data-ng-modelsono uguali ed equivalenti.

Documento AngularJS - Normalizzazione

Angolare normalizza il tag di un elemento e il nome dell'attributo per determinare quali elementi corrispondono a quali direttive. In genere ci riferiamo alle direttive con il loro nome normalizzato camelCase sensibile al maiuscolo / minuscolo (ad es ngModel.). Tuttavia, poiché l'HTML non fa distinzione tra maiuscole e minuscole, ci riferiamo alle direttive nel DOM in forme minuscole, in genere utilizzando attributi delimitati da trattini su elementi DOM (ad es ng-model.).

Il processo di normalizzazione è il seguente:
1. Striscia x-e data-dalla parte anteriore dell'elemento / degli attributi.
2. Convertire il :, -o _nome delimitato da a camelCase.

Per esempio
i seguenti moduli sono tutti equivalenti e corrispondono alla direttiva 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>

— gorgo
fonte

2

Puoi usare data-ng-, invece di ng-, se vuoi rendere valido l'HTML della tua pagina.

— NNaseet
fonte

2

il PO comprende che possono essere usati in modo intercambiabile, ma desidera sapere perché i due sono disponibili se funzionano "allo stesso modo". Credo che una spiegazione di ciò che li rende diversi sarebbe una risposta più preziosa.

— Charles Watson,

1

se vuoi manipolare i frammenti html o html sul tuo server prima di servirlo nel browser, sicuramente vorrai usare gli attributi data-ng-xxx anziché solo gli attributi ng-xxx.

Rende valido il tuo html, il che significa che può essere utilizzato da parser html (basati su server) come domdocument (php) o altri. Questi parser spesso falliscono su HTML non ben formato.
Angular normalizza l'attributo, ma ricorda che si trova sul client, non sul server.

— Kees Hessels
fonte