AngularJS Directive Restrict A vs E

113

ฉันทำงานในทีมเล็ก ๆ สร้างใน AngularJS และพยายามรักษามาตรฐานพื้นฐานและแนวทางปฏิบัติที่ดีที่สุด โดยเฉพาะอย่างยิ่งเราค่อนข้างใหม่กับ Angular

คำถามของฉันเกี่ยวกับ Directives ถูกต้องมากขึ้นrestrictตัวเลือก

พวกเราบางคนใช้restrict: 'E'จึงมี<my-directive></my-directive>ใน html

คนอื่นกำลังใช้restrict: 'A'และมี<div my-directive></div>อยู่ใน html

จากนั้นแน่นอนคุณสามารถใช้ restrict: 'EA'และใช้อย่างใดอย่างหนึ่งข้างต้นได้

ในขณะนี้มันไม่ใช่เรื่องใหญ่ แต่เมื่อโครงการนี้ใหญ่โตเท่าที่จะเป็นไปได้ฉันก็อยากให้ใครก็ตามที่ดูมันเข้าใจได้ง่ายว่าเกิดอะไรขึ้น

มีข้อดี / ข้อเสียของคุณลักษณะหรือองค์ประกอบในการทำสิ่งต่างๆหรือไม่?

มีข้อผิดพลาดใดบ้างที่เราควรทราบหากเลือก say element over attribute?

javascript html angularjs

— คาร์เรนเวนไรท์
แหล่งที่มา

100

ตามเอกสาร :

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

แก้ไขความคิดเห็นต่อไปนี้เกี่ยวกับข้อผิดพลาดเพื่อรับคำตอบที่สมบูรณ์:

สมมติว่าคุณกำลังสร้างแอปที่ควรทำงานบน Internet Explorer <= 8 ซึ่งทีม AngularJS จาก AngularJS 1.3 ถูกยกเลิกการสนับสนุนคุณต้องปฏิบัติตามคำแนะนำต่อไปนี้เพื่อให้ใช้งานได้: https: //docs.angularjs .org / คู่มือ / คือ

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

3

ฉันอ่านเอกสารเหล่านั้นขึ้นและลง แต่พลาดเอกสารนี้ :) ขอบคุณ

— Darren Wainwright

3

คำอธิบายนี้ไม่ครอบคลุมถึงข้อผิดพลาดและข้อดี / ข้อเสียใด ๆ

— Konstantin Krass

อัปเดตคำตอบของฉันเกี่ยวกับข้อผิดพลาด ฉันไม่ได้พูดถึงข้อดี / ข้อเสียเพราะฉันคิดว่าเรากำลังพูดถึงแนวทางปฏิบัติที่ดีที่สุดที่นี่โดยเฉพาะอย่างยิ่งเมื่อทีม Angular แนะนำและอธิบาย

— ngasull

1

"ฉันไม่ได้พูดถึงข้อดี / ข้อเสียเพราะฉันคิดว่าเรากำลังพูดถึงแนวทางปฏิบัติที่ดีที่สุดที่นี่โดยเฉพาะอย่างยิ่งเมื่อทีม Angular แนะนำและอธิบาย" ฮะ? :)

— Alexander Mills

169

จำกัด ใช้สำหรับกำหนดประเภทคำสั่งและสามารถเป็นA(แอตทริบิวต์) C(คลาส) E(องค์ประกอบ) และM(coMment) สมมติว่าชื่อของคำสั่งคือDoc:

ประเภท: การใช้งาน

A = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

— Seif Tamallah
แหล่งที่มา

2

ชัดเจนน้อยกว่าคำตอบของ @nikunj แต่หลังจากเห็นคำตอบฉันเข้าใจคุณ ...

— Alexander Mills

47

โดยทั่วไปตัวเลือกการ จำกัด จะถูกตั้งค่าเป็น:

"A" - จับคู่เฉพาะชื่อแอตทริบิวต์
'E' - จับคู่ชื่อองค์ประกอบเท่านั้น
'C' - ตรงกับชื่อคลาสเท่านั้น
'M' - ตรงกับความคิดเห็นเท่านั้น

นี่คือการเชื่อมโยงเอกสาร

— Nikunj คานธี
แหล่งที่มา

เรียบง่ายและสะอาด

— Gaurav_0093

7

ไม่รองรับองค์ประกอบใน IE8 นอกกรอบคุณต้องทำงานบางอย่างเพื่อให้ IE8 ยอมรับแท็กที่กำหนดเอง

ข้อดีอย่างหนึ่งของการใช้แอตทริบิวต์เหนือองค์ประกอบคือคุณสามารถใช้หลายคำสั่งกับโหนด DOM เดียวกันได้ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับสิ่งต่างๆเช่นการควบคุมแบบฟอร์มที่คุณสามารถไฮไลต์ปิดใช้งานหรือเพิ่มป้ายกำกับ ฯลฯ ด้วยแอตทริบิวต์เพิ่มเติมโดยไม่ต้องรวมองค์ประกอบไว้ในแท็กมากมาย

— แจ็คอัลลัน
แหล่งที่มา

5

หนึ่งในข้อผิดพลาดที่ฉันรู้คือปัญหา IE กับองค์ประกอบที่กำหนดเอง ดังที่ยกมาจากเอกสาร :

3) คุณไม่ได้ใช้แท็กองค์ประกอบที่กำหนดเองเช่น (ใช้เวอร์ชันแอตทริบิวต์แทน)

4) หากคุณใช้แท็กองค์ประกอบที่กำหนดเองคุณต้องทำตามขั้นตอนเหล่านี้เพื่อให้ IE 8 และต่ำกว่ามีความสุข

<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <head>
      <!--[if lte IE 8]>
        <script>
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');

          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        </script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

— Khanh TO
แหล่งที่มา

4

หลุมพราง:

การใช้องค์ประกอบ html ของคุณเองเช่น<my-directive></my-directive>เคยชินกับ IE8 โดยไม่มีวิธีแก้ปัญหา ( https://docs.angularjs.org/guide/ie )
การใช้องค์ประกอบ html ของคุณเองจะทำให้การตรวจสอบความถูกต้องของ html ล้มเหลว
คำสั่งที่มีพารามิเตอร์เท่ากันสามารถทำได้ดังนี้:

<div data-my-directive="ValueOfTheFirstParameter"></div>

แทนสิ่งนี้:

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

เราไม่ใช้องค์ประกอบ html ที่กำหนดเองเพราะถ้า 2 ข้อเท็จจริงนี้

ทุกคำสั่งโดยกรอบของบุคคลที่สามสามารถเขียนได้สองวิธี:

<my-directive></my-directive>

หรือ

<div data-my-directive></div>

ไม่เหมือนกัน

— คอนสแตนตินคราส
แหล่งที่มา

1

หากคุณต้องการสร้างคำสั่งที่มีพารามิเตอร์ขอบเขต 1 เท่ากันการทำด้วย A. จะง่ายกว่าเพราะคุณไม่ต้องสร้างแอตทริบิวต์เพิ่มเติม

— Konstantin Krass

คุณหมายถึงอะไรเพิ่มเติม? ทางเลือกทั้งสองมีแอตทริบิวต์เดียว

— ที่ดีขึ้น

3

2 ปัญหาเกี่ยวกับองค์ประกอบ:

รองรับเบราว์เซอร์เก่าไม่ดี
SEO - เครื่องมือของ Google ไม่ชอบพวกเขา

ใช้แอตทริบิวต์

— อาเมียร์โปโปวิช
แหล่งที่มา

คำสั่งเป็นองค์ประกอบอาจทำให้เกิดปัญหา SEO? ฉันประหลาดใจ. แล้วreplaceแอตทริบิวต์เป็นtrueอย่างไร?

— chalasr

1

การอ้างสิทธิ์เหล่านี้ต้องการการอ้างอิง จุดที่ 1 ค่อนข้างมีชื่อเสียงที่อื่น แต่ฉันชอบดูแหล่งข้อมูลเกี่ยวกับ Point 2

— rinogo