ng-app เทียบกับ data-ng-app ความแตกต่างคืออะไร?

230

ฉันกำลังดูวิดีโอแนะนำเริ่มต้นนี้สำหรับangular.js

ในบางช่วงเวลา (หลังจาก 12'40 ") ผู้พูดระบุว่าคุณลักษณะng-appและdata-ng-app=""มีค่าเทียบเท่าหรือน้อยกว่าภายใน<html>แท็กและเช่นนั้นng-model="my_data_bindingและdata-ng-model="my_data_binding"อย่างไรก็ตามผู้พูดบอกว่า html จะถูกตรวจสอบผ่านตัวตรวจสอบที่แตกต่างกัน ใช้

คุณสามารถอธิบายความแตกต่างระหว่างสองวิธีที่ng-คำนำหน้ากับdata-ng-คำนำหน้า?

html angularjs

— Stephane Rolland
แหล่งที่มา

2

ความเป็นไปได้ที่ซ้ำกันของng-app และ data-ng-app ต่างกันอย่างไร?

— Bob Jarvis - Reinstate Monica

403

คำถามที่ดี. ความแตกต่างคือง่าย - มีอย่างแตกต่างระหว่างสองไม่มียกเว้นว่า validators HTML5 บางอย่างจะโยนความผิดพลาดเกี่ยวกับทรัพย์สินเหมือนng-appแต่พวกเขาไม่ได้โยนความผิดพลาดสำหรับสิ่งที่นำหน้าด้วยเช่นdata-data-ng-app

ดังนั้นเพื่อตอบคำถามของคุณใช้data-ng-appหากคุณต้องการตรวจสอบ HTML ของคุณให้ง่ายขึ้น

สนุกจริง: คุณสามารถใช้เอx-ng-appฟเฟกต์เดียวกันได้

— รหัสกระซิบ
แหล่งที่มา

4

คำนำหน้าข้อมูลจะป้องกันแอตทริบิวต์ ng ไม่ให้ทำงานอย่างถูกต้องหรือไม่ (เช่น "data-ng-repeat")?

— tonejac

3

ดูเหมือนว่าเช่นเสียรอบการทำงานที่จะเปลื้องผ้าด้วยตนเองและdata- x-ทำไมกฎการตรวจสอบ HTML ไม่สามารถเปลี่ยนเป็นng-สิ่งที่ยอมรับได้?

— DaveAlger

8

@DaveAlger: data-*แอตทริบิวต์เป็นวิธีที่จะขยาย HTML

— sampathsris

1

@DaveAlger: มันเป็นความคิดที่ดีที่จะทำตามที่คุณพูด หากมีเครื่องมือที่มีชื่อเสียงจำนวนมากเช่น Angular ด้านนอกที่มีคำนำหน้าแตกต่างกันคุณต้องการให้ HTML ติดตามพวกเขาทั้งหมดเพื่อเพิ่มคำนำหน้าของพวกเขา?!?! ดังที่ Krumia กล่าวว่าเป็นวิธีการขยาย HTML

— Dassi Orleando

65

จากเอกสาร Angularjs

Angular ทำให้แท็กและชื่อแอตทริบิวต์ขององค์ประกอบเป็นปกติเพื่อกำหนดว่าองค์ประกอบใดตรงกับคำสั่งใด โดยทั่วไปเราจะอ้างถึงคำสั่งโดยชื่อที่ได้รับการปรับให้ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ (เช่น ngModel) อย่างไรก็ตามเนื่องจาก HTML ไม่คำนึงถึงตัวพิมพ์ใหญ่และตัวพิมพ์เล็กเราจึงอ้างถึงคำสั่งใน DOM โดยใช้แบบตัวพิมพ์เล็กโดยทั่วไปจะใช้แอททริบิวแบบขีดเส้นใต้บนองค์ประกอบ DOM (เช่น ng-model)

กระบวนการฟื้นฟูเป็นดังนี้:

ตัด x- และ data- จากด้านหน้าขององค์ประกอบ / คุณสมบัติ แปลงชื่อ:, -, หรือ _-delimited เป็น camelCase นี่คือตัวอย่างขององค์ประกอบที่เทียบเท่ากับ ngBind:

ตามข้อความข้างต้นด้านล่างทั้งหมดเป็นคำสั่งที่ถูกต้อง

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

— srinu
แหล่งที่มา

แต่จะทำเช่นนี้เพื่อเปรียบเทียบกับชื่อคำสั่งเท่านั้น มันไม่เปลี่ยนแอตทริบิวต์จริง

— RetroCoder

3

ดีใจที่ได้ทราบเกี่ยวกับ -,: และ _ สัญกรณ์

— Code Whisperer

29

ความแตกต่างอยู่ในความจริงที่กำหนดเองdata-*แอตทริบิวต์ที่ถูกต้องในสเปค HTML5 ดังนั้นหากคุณต้องการมาร์กอัปของคุณเพื่อตรวจสอบความถูกต้องคุณควรใช้มาร์กอัปมากกว่าngคุณสมบัติ

— มนู Letroll
แหล่งที่มา

1

ฉันเข้าใจจากข้อกำหนดที่ data- * ใช้งานได้เพราะมันเพิ่งตรวจสอบความถูกต้องของ html แต่ทำไม x- * ถึงใช้งานได้? ไม่มีคำอธิบายใด ๆ เกี่ยวกับสิ่งนี้ในสเปค

— Bhramar

1

x- * สงวนไว้สำหรับการใช้งานโดยเบราว์เซอร์ สำหรับคำถามของคุณเกี่ยวกับ WHY x ทำงานทั้งสองจะทำงานเป็นเชิงมุมทำให้แน่ใจว่ามันทำงานได้กับข้อมูล / x โดยการเข้ารหัสลงในกรอบงานของพวกเขา ถ้าคุณถามว่าทำไม x ถึงทำงานเป็นเชิงมุมได้ มีข้อโต้แย้งที่ดีสำหรับทั้งสอง ดูคำตอบนี้ใน SO: stackoverflow.com/a/17902387/339803คำตอบอื่น ๆ ในหน้านั้นดูเหมือนว่าจะเป็น x สำหรับ XHTML แต่ฉันไม่แน่ใจ ดูสิ่งที่คุณสามารถทำได้หลังจากอ่านทุกอย่าง ข้อมูลจำเพาะ HTML5 ยังระบุว่าการใช้เบราว์เซอร์ / ผู้ขาย: w3.org/html/wg/drafts/html/master/single-page.html

— redfox05

15

คำตอบสั้น ๆ :

ng-modelและdata-ng-modelเหมือนกันและเทียบเท่า!

ทำไม?

เหตุผลสำหรับ: data-คำนำหน้า
สเปค HTML5คาดว่าแอตทริบิวต์ที่กำหนดเองใด ๆ data-ที่จะนำหน้าด้วย
เหตุผลสำหรับ:ทั้งสองng-modelและdata-ng-modelเหมือนกันและเทียบเท่า

เอกสาร AngularJS - การทำให้เป็นมาตรฐาน

Angular ทำให้แท็กและแอตทริบิวต์ขององค์ประกอบเป็นปกติเพื่อกำหนดว่าองค์ประกอบใดที่ตรงกับคำสั่ง เรามักจะอ้างถึงคำสั่งของพวกเขาโดยกรณีCamelCaseชื่อปกติ (เช่นngModel) อย่างไรก็ตามเนื่องจาก HTML ไม่คำนึงถึงขนาดตัวพิมพ์เราจึงอ้างอิงถึงคำสั่งใน DOM โดยใช้แบบตัวพิมพ์เล็กโดยทั่วไปจะใช้แอททริบิวที่คั่นด้วยเครื่องหมายขีดบนองค์ประกอบ DOM (เช่นng-model)

กระบวนการฟื้นฟูจะเป็นดังนี้:
1. Strip x-และdata-จากด้านหน้าขององค์ประกอบ / คุณสมบัติ
2. แปลง:, -หรือ_ชื่อ -delimited camelCaseไป

ตัวอย่างเช่น
แบบฟอร์มต่อไปนี้เทียบเท่าและตรงกับคำสั่ง 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>

— ไหลวน
แหล่งที่มา

2

คุณสามารถใช้ data-ng- แทน ng- หากคุณต้องการทำให้หน้า HTML ของคุณใช้งานได้

— NNaseet
แหล่งที่มา

2

OP เข้าใจดีว่าพวกเขาสามารถใช้แทนกันได้ แต่ต้องการทราบว่าทำไมทั้งสองจึงพร้อมใช้งานหากพวกเขาทำงาน "เหมือนกัน" ฉันเชื่อว่าการอธิบายสิ่งที่ทำให้พวกเขาแตกต่างกันจะเป็นคำตอบที่มีค่ามากกว่า

— Charles Watson

1

หากคุณต้องการจัดการกับ html หรือ html-fragments บนเซิร์ฟเวอร์ของคุณก่อนที่จะแสดงในเบราว์เซอร์คุณต้องการใช้แอตทริบิวต์ data-ng-xxx แทนการใช้คุณสมบัติ ng-xxx

มันทำให้ html ของคุณถูกต้องซึ่งหมายความว่ามันสามารถใช้โดย parsers html (ตามเซิร์ฟเวอร์) เช่น domdocument (php) หรืออื่น ๆ ตัวแยกวิเคราะห์เหล่านี้มักจะล้มเหลวในรูปแบบ html ที่ไม่ดี
Angular ทำให้แอททริบิวต์เป็นปกติ แต่โปรดจำไว้ว่ามันอยู่บนไคลเอนต์ไม่ใช่ในเซิร์ฟเวอร์

— Kees Hessels
แหล่งที่มา