ข้อแตกต่างระหว่าง ng-app และ data-ng-app คืออะไร?

147

ฉันเริ่มเรียนรู้เกี่ยวกับ AngularJS และสับสนเกี่ยวกับความแตกต่างระหว่างng-appและdata-ng-appสั่ง

angularjs angularjs-directive

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

7

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

— chenrui

8

@chenrui - คำถามนี้มาก่อน btw (24 เมษายน vs 16 พฤษภาคม)

— นักปราชญ์ Blundering

1

แอพลิเคชันของคุณจะไม่ได้รับผลกระทบจะเชิงมุมและจะทำงานตามที่คาดไว้แม้ว่าคุณจะใช้ ng แอปหรือข้อมูล-ng แอป แต่เป็นที่กล่าวถึงโดย @ user2289659 การใช้ DATA- * เป็นที่รู้จักมาตรฐานแอตทริบิวต์ที่กำหนดเองจาก HTML5 เป็นต้นไป

— Shujaath ข่าน

125

คำตอบเหล่านี้ส่วนใหญ่บอกว่าทำให้ HTML ที่ถูกต้องของเทมเพลตหรือHTML Validator Compliantโดยไม่ต้องอธิบายความหมายของคำเหล่านี้

ฉันไม่รู้แน่ชัด แต่ฉันเดาว่าข้อกำหนดเหล่านี้ใช้กับโปรแกรมตรวจสอบความถูกต้องของ HTML ที่สแกนโค้ดของคุณเพื่อให้เป็นไปตามมาตรฐาน - เช่นไลต์ พวกเขาไม่รู้จักng-appว่าเป็นแอตทริบิวต์ที่ถูกต้อง พวกเขาคาดหวังว่าคุณลักษณะ HTML ที่ไม่ใช่ค่าเริ่มต้นจะถูกนำหน้าด้วย

data-attribute_name_here.

ดังนั้นผู้สร้างของAngularJSได้สร้างชื่อสำรองสำหรับคำสั่งของพวกเขาที่มีdata-อยู่ข้างหน้าพวกเขาเพื่อให้โปรแกรมตรวจสอบ HTML จะ "ชอบ" พวกเขา

— เคอร์บีวอลเลซ
แหล่งที่มา

4

+1 สำหรับ "ตกลงดังนั้น" ตัวตรวจสอบความสอดคล้องตามมาตรฐาน "หมายความว่าอย่างไร" เข้าใกล้ ถ้าคุณทำวิจัยคุณจะพบว่าคุณเดาถูก =)

— slacktracer

22

HTML ที่ถูกต้องไม่ได้ใช้สำหรับเครื่องมือตรวจสอบ HTML เบราว์เซอร์แยกวิเคราะห์ HTML หากคุณเริ่มเบี่ยงเบนจากข้อกำหนดของ HTML จะไม่มีการรับประกันว่า HTML ของคุณจะถูกวิเคราะห์อย่างถูกต้อง

— เครื่องปั่น

1

ใช่ผู้ตรวจสอบเป็นวิธีการที่จะสิ้นสุด เป้าหมายคือทำให้หน้าเว็บของคุณใกล้เคียงกับข้อกำหนดมากที่สุดซึ่งจะช่วยเพิ่มจำนวนเบราว์เซอร์ทั้งเก่าปัจจุบันและอนาคตซึ่งแอปของคุณจะทำงานได้จริงตามที่คาดไว้ ในกรณีของ "data- *" นอกจากนี้ยังมีเบราว์เซอร์ที่มีความเสี่ยงสามารถแนะนำแอตทริบิวต์เดียวกันกับมาตรฐานซึ่งจะชนกับแอตทริบิวต์ของแอปของคุณ นอกจากนี้การยึดมาตรฐานเช่นนี้จะช่วยให้เครื่องมือ (เช่นผู้แก้ไข) เข้าใจและทำให้เป็นประโยชน์กับคุณมากขึ้น

— mahemoff

2

@Blender "ไม่มีการรับประกันว่า HTML ของคุณจะได้รับการวิเคราะห์อย่างถูกต้อง" ซึ่งสามารถพูดได้เหมือนกันสำหรับ HTML ที่ถูกต้อง

— twiz

1

@ ชัคฉันไม่แนะนำให้คุณทำอย่างใดอย่างหนึ่งเพียงว่าปัญหาไม่สำคัญโดยเฉพาะ เราอาจถกเถียงช่องว่างกับแท็บในขณะที่เรากำลังทำอยู่ haha

— twiz

41

ไม่มีในแง่ของพฤติกรรมรันไทม์ซึ่งเป็นรูปแบบที่แตกต่างกันของคำสั่งการตั้งชื่อตามที่อธิบายไว้ที่นี่: http://docs.angularjs.org/guide/directive

คำสั่งมีชื่อที่ใส่อูฐเช่น ngBind คำสั่งสามารถเรียกใช้โดยการแปลชื่อเคสอูฐเป็นเคสงูด้วยอักขระพิเศษเหล่านี้:, -, หรือ _ อีกทางเลือกหนึ่งคำสั่งสามารถนำหน้าด้วย x- หรือ data- เพื่อให้เป็นไปตามมาตรฐานการตรวจสอบ HTML นี่คือรายการของชื่อคำสั่งที่เป็นไปได้: ng: bind, ng-bind, ng_bind, x-ng-bind และ data-ng-bind

อย่างที่คุณเห็นจากการอ่านสิ่งนี้data-สามารถใช้เพื่อทำการทดสอบ HTML validator validator ของคุณ /

— pkozlowski.opensource
แหล่งที่มา

2

ในสเปคของ HTML ที่อนุญาตสำหรับสิ่งนี้?

— user1876508

3

@ user1876508: w3.org/TR/2011/WD-html5-20110525/ …

— pkozlowski.opensource

6

คุณสามารถประกาศ namespace เชิงมุม <html xmlns:ng="http://angularjs.org" ng-app>

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

2

ดูเหมือนว่าจะใช้ได้เฉพาะกับแอปรุ่นเก่า: "หากคุณเลือกใช้ไวยากรณ์คำสั่งแบบเก่า ng: จากนั้นให้รวม xml-namespace ใน html เพื่อทำให้ IE มีความสุข (นี่คือเหตุผลทางประวัติศาสตร์และเราไม่แนะนำให้ใช้อีกต่อไป งะ :. )" ที่มา: docs.angularjs.org/guide/bootstrap

— Chuck Le Butt

5

ในเบราว์เซอร์ที่ทันสมัยไม่มีความแตกต่าง แต่ใน IE ที่เก่ากว่าพวกมันจะไม่ทำงานจนกว่าคุณจะประกาศ XML namespace ที่กำหนดไว้

นอกจากนี้ยังมีความแตกต่างในการตรวจสอบความถูกต้องในที่ng-appไม่ถูกต้อง XHTML และจะทำให้หน้าเว็บของคุณล้มเหลวในการตรวจสอบ HTML Angular อนุญาตให้คุณนำหน้าคำสั่งด้วยdata-หรือx-อนุญาตให้ตรวจสอบได้

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

สิ่งนี้ดูเหมือนจะเป็นจริงเฉพาะเมื่อคุณใช้ "ng:" ฉันเชื่อว่า "data-ng-" ควรตรวจสอบความถูกต้อง

— Chuck Le Butt

4

คุณสามารถใช้ data-ng- แทน ng- หากคุณต้องการทำให้หน้า HTML ของคุณใช้งานได้
นี่จะทำให้เกิดข้อผิดพลาด

<div ng-app="">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>

</div>

สิ่งนี้จะไม่ทำให้เกิดข้อผิดพลาด

<div data-ng-app="scope" data-ng-init="name='test'">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" data-ng-model="name"></p>
  <p data-ng-bind="name"></p>

</div>

— Vahap Gencdal
แหล่งที่มา

คุณช่วยอธิบายได้ไหมว่าทำไมสถานการณ์แรกถึงเกิดข้อผิดพลาด

— Awani

นี่คือการอ้างอิงการตรวจสอบ w3c

— Graham P Heath

3

ความแตกต่างพื้นฐานระหว่างคำสองคำนี้คือ data-ng-app จะตรวจสอบความถูกต้องของ HTML ในขณะที่คำสั่งหลังไม่ได้ฟังก์ชันการทำงานยังคงเหมือนเดิม สำหรับการอ้างอิงเพิ่มเติมคุณสามารถลอง w3Validator

— Abhishek Gakhar
แหล่งที่มา

-2

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

แม้คุณสามารถใช้คำสั่งเชิงมุมในวิธีที่กล่าวถึงข้างล่าง ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

— รัชกาล
แหล่งที่มา