ฉันเริ่มเรียนรู้เกี่ยวกับ AngularJS และสับสนเกี่ยวกับความแตกต่างระหว่างng-app
และdata-ng-app
สั่ง
ฉันเริ่มเรียนรู้เกี่ยวกับ AngularJS และสับสนเกี่ยวกับความแตกต่างระหว่างng-app
และdata-ng-app
สั่ง
คำตอบ:
คำตอบเหล่านี้ส่วนใหญ่บอกว่าทำให้ HTML ที่ถูกต้องของเทมเพลตหรือHTML Validator Compliantโดยไม่ต้องอธิบายความหมายของคำเหล่านี้
ฉันไม่รู้แน่ชัด แต่ฉันเดาว่าข้อกำหนดเหล่านี้ใช้กับโปรแกรมตรวจสอบความถูกต้องของ HTML ที่สแกนโค้ดของคุณเพื่อให้เป็นไปตามมาตรฐาน - เช่นไลต์ พวกเขาไม่รู้จักng-app
ว่าเป็นแอตทริบิวต์ที่ถูกต้อง พวกเขาคาดหวังว่าคุณลักษณะ HTML ที่ไม่ใช่ค่าเริ่มต้นจะถูกนำหน้าด้วย
data-attribute_name_here
.
ดังนั้นผู้สร้างของAngularJS
ได้สร้างชื่อสำรองสำหรับคำสั่งของพวกเขาที่มีdata-
อยู่ข้างหน้าพวกเขาเพื่อให้โปรแกรมตรวจสอบ HTML จะ "ชอบ" พวกเขา
ไม่มีในแง่ของพฤติกรรมรันไทม์ซึ่งเป็นรูปแบบที่แตกต่างกันของคำสั่งการตั้งชื่อตามที่อธิบายไว้ที่นี่: 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 ของคุณ /
คุณสามารถประกาศ namespace เชิงมุม <html xmlns:ng="http://angularjs.org" ng-app>
ในเบราว์เซอร์ที่ทันสมัยไม่มีความแตกต่าง แต่ใน IE ที่เก่ากว่าพวกมันจะไม่ทำงานจนกว่าคุณจะประกาศ XML namespace ที่กำหนดไว้
นอกจากนี้ยังมีความแตกต่างในการตรวจสอบความถูกต้องในที่ng-app
ไม่ถูกต้อง XHTML และจะทำให้หน้าเว็บของคุณล้มเหลวในการตรวจสอบ HTML Angular อนุญาตให้คุณนำหน้าคำสั่งด้วยdata-
หรือx-
อนุญาตให้ตรวจสอบได้
คุณสามารถใช้ 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>
ความแตกต่างพื้นฐานระหว่างคำสองคำนี้คือ data-ng-app จะตรวจสอบความถูกต้องของ HTML ในขณะที่คำสั่งหลังไม่ได้ฟังก์ชันการทำงานยังคงเหมือนเดิม สำหรับการอ้างอิงเพิ่มเติมคุณสามารถลอง w3Validator
แน่นอนว่าไม่มีความแตกต่างระหว่างทั้งสองยกเว้นว่าตัวตรวจสอบ HTML5 บางอย่างจะโยนข้อผิดพลาดในพร็อพเพอร์ตี้เช่น ng-app แต่พวกเขาจะไม่โยนข้อผิดพลาดสำหรับสิ่งที่นำหน้าด้วย data ดังนั้นการใช้คำนำหน้าข้อมูลกับคำสั่งเชิงมุมของเรานั้นดี
แม้คุณสามารถใช้คำสั่งเชิงมุมในวิธีที่กล่าวถึงข้างล่าง ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind