ng-app ile data-ng-app arasındaki fark nedir?

230

Şu anda bakıyorum bu başlangıç öğretici videosu içinangular.js

Bazı an (12'40" sonra), hoparlör devletler nitelikler Bunun üzerine ng-appve data-ng-app=""az ya da çok denk içindedir <html>etiketi, vb vardır ng-model="my_data_bindingve data-ng-model="my_data_binding". Ancak konuşmacı niteliği olan bağlı html, farklı doğrulayıcılar aracılığıyla valide olacağını söylüyor Kullanılmış.

Ön ng-ek ile data-ng-önek arasındaki iki yol arasındaki farkı açıklayabilir misiniz ?

html angularjs

— Stephane Rolland
kaynak

2

olası yinelenen ng-app ve veri ng-app arasındaki fark nedir?

— Bob Jarvis - Monica'yı

403

İyi soru. Fark basittir - bazı HTML5 doğrulayıcılarının benzer bir mülke hata atamaları dışında ikisi arasında kesinlikle hiçbir fark yoktur ng-app, ancak ön ekli data-gibi herhangi bir şey için hata atmazlar data-ng-app.

Sorunuzu cevaplamak için data-ng-appHTML'nizi doğrulamanın biraz daha kolay olmasını istiyorsanız kullanın .

Eğlenceli gerçek: x-ng-appAynı efekti de kullanabilirsiniz .

— Kod Fısıltısı
kaynak

4

Veri öneki bir ng özelliğinin düzgün çalışmasını engeller mi? (örneğin, "veri ng-tekrar")?

— tonejac

3

El ile çıkarmak için böyle bir CPU döngüleri kaybı gibi görünüyor data-ve x-. HTML doğrulama kuralları bir ng-şeyi kabul edecek şekilde değiştirilemiyor ?

— DaveAlger

8

@DaveAlger: data-*özellikler HTML'yi genişletmenin yoludur .

— sampathsris

1

@DaveAlger: Dediğin gibi yapmak kötü bir fikir. Angular dışında çok sayıda ünlü araç varsa, önek eklemek için HTML'nin hepsini takip etmesini istersiniz?!?! Krumia'nın dediği gibi HTML'yi genişletmenin yolu budur.

— Dassi Orleando

65

Gönderen angularjs Belgeler

Açısal, hangi öğelerin hangi direktiflerle eşleştiğini belirlemek için bir öğenin etiketini ve nitelik adını normalleştirir. Tipik olarak, büyük / küçük harfe duyarlı camelCase normalleştirilmiş adları (örn. NgModel) ile yönlendiriliriz. Bununla birlikte, HTML büyük / küçük harfe duyarlı olmadığından, DOM'daki yönergelere, tipik olarak DOM öğelerinde tire sınırlandırılmış nitelikler (örn. Ng-model) kullanılarak küçük harf formlarıyla başvururuz.

Normalleştirme süreci aşağıdaki gibidir:

Öğenin / özniteliklerin önünden x- ve verileri- soyun. :, - veya _-sınırlandırılmış adı camelCase'e dönüştürün. NgBind ile eşleşen öğelere eşdeğer bazı örnekler:

Yukarıdaki ifadeye dayanarak, hepsi geçerli direktiflerdir

1. ng-bağlama
2. ng: bağlama
3. ng_bind
4. data-ng-bağlama
5. x-ng-bağlama

— srinu
kaynak

Ancak bunu yalnızca yönerge adıyla karşılaştırmak için yapar. Gerçek niteliği değiştirmez.

— RetroCoder

3

- ,: ve _ notasyonu hakkında bilmek güzel

— Code Whisperer

29

Farklılıklar data-*, HTML5 spesifikasyonunda özel özelliklerin geçerli olması gerçeğinde yatmaktadır . Dolayısıyla, işaretlemenizin doğrulanması gerekiyorsa, bunları ngniteliklerden ziyade kullanmalısınız .

— Manu Letroll
kaynak

1

Ben sadece html doğrular gibi data- * işe yarayacak şartname anlıyorum. Ama o zaman neden x- * işe yarar? şartnamede bununla ilgili herhangi bir açıklama yoktur.

— Bhramar

1

x- * tarayıcı tarafından kullanılmak üzere ayrılmıştır. NEDEN x'in çalıştığı sorusuna gelince, ya açısal olarak çalışacak, özellikle veri / x için kendi çerçevelerine kodlayarak çalışmasını sağlar. X'in neden açısal için çalıştığını soruyorsanız, bu başka bir tartışma. İkisi için de iyi argümanlar var. SO ile ilgili şu cevaba bakınız: stackoverflow.com/a/17902387/339803 Bu sayfadaki diğer cevap x'in XHTML için olduğunu düşünüyor gibi görünüyor, ama emin değilim. Hepsini okuduktan sonra neler yapabileceğinizi görün. HTML5 spesifikasyonu ayrıca tarayıcı / satıcı kullanımını da söylüyor: w3.org/html/wg/drafts/html/master/single-page.html

— redfox05 17:15

15

Kısa cevap:

ng-modelve data-ng-modelaynı ve eşdeğerdir!

Neden?

Nedeni: data- önek
HTML5 belirtimi, önekinin eklenmesini istediğiniz özel özelliğin olmasını bekler data-.
: nedeni hem ng-modelve data-ng-modelaynı ve eşdeğerdir.

AngularJS Belgesi - Normalleştirme

Açısal, hangi öğelerin hangi direktiflerle eşleştiğini belirlemek için bir öğenin etiketini ve nitelik adını normalleştirir. Tipik olarak, direktifleri büyük / küçük harfe duyarlı camelCase normalleştirilmiş adıyla (örn ngModel. Bununla birlikte, HTML büyük / küçük harfe duyarlı olmadığından, DOM'daki yönergelere, tipik olarak DOM öğelerinde (örneğin ) kısa çizgi ile ayrılmış öznitelikler kullanarak küçük harf formlarıyla başvururuz ng-model.

Normalleştirme işlemi aşağıdaki gibidir:
1. Şerit x-ve data-elemanın / niteliklerin önünden.
Dönüştürme 2. :, -ya _hiç -delimited adını camelCase.

Örneğin
aşağıdaki formların hepsi eşdeğerdir ve ngBind yönergesiyle eşleşir:

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

— anafor
kaynak

2

Sayfanızın HTML kodunu geçerli yapmak istiyorsanız, ng- yerine data-ng- kullanabilirsiniz.

— NNaseet
kaynak

2

OP bunların birbirinin yerine kullanılabileceğini bilir, ancak "aynı" çalışırlarsa ikisinin neden mevcut olduğunu bilmek ister. Onları farklı kılan şeyin açıklanmasının daha değerli bir cevap olacağına inanıyorum.

— Charles Watson

1

tarayıcınıza sunmadan önce sunucunuzdaki html veya html-fragmanlarını değiştirmek istiyorsanız, kesinlikle ng-xxx öznitelikleri yerine data-ng-xxx özniteliklerini kullanmak istiyorsunuz.

HTML'nizi geçerli kılar, yani domdocument (php) veya diğerleri gibi html (sunucu tabanlı) ayrıştırıcılar tarafından kullanılabilir. Bu ayrıştırıcılar genellikle iyi biçimlendirilmemiş html'de başarısız olur.
Açısal özniteliği normalleştirir, ancak unutmayın, istemcide, sunucuda değil.

— Kees Hessels
kaynak