บางแห่งดูเหมือนว่าจะใช้ฟังก์ชั่นควบคุมสำหรับตรรกะคำสั่งและอื่น ๆ ใช้ลิงค์ ตัวอย่างแท็บบนโฮมเพจเชิงมุมใช้คอนโทรลเลอร์สำหรับหนึ่งและลิงก์สำหรับคำสั่งอื่น ความแตกต่างระหว่างสองคืออะไร?
คำตอบ:
ฉันจะขยายคำถามของคุณเล็กน้อยและรวมถึงฟังก์ชั่นการคอมไพล์
ฟังก์ชั่นการคอมไพล์ - ใช้สำหรับการจัดการ DOM แม่แบบ (เช่นการจัดการขององค์ประกอบ tElement = เท็มเพลต) ดังนั้นการจัดการที่ใช้กับ DOM clones ทั้งหมดของเทมเพลตที่เกี่ยวข้องกับคำสั่ง (หากคุณต้องการฟังก์ชันลิงก์ (หรือฟังก์ชันก่อนและหลังลิงก์ลิงก์) และคุณได้กำหนดฟังก์ชันการคอมไพล์ฟังก์ชันการคอมไพล์จะต้องส่งคืนฟังก์ชันลิงก์เนื่องจาก'link'แอตทริบิวต์นั้นถูกละเว้นหาก'compile'มีการกำหนดแอตทริบิวต์)
ฟังก์ชั่นการเชื่อมโยง - โดยปกติจะใช้สำหรับการลงทะเบียนการเรียกกลับ (เช่น$watchการแสดงออกในขอบเขต) เช่นเดียวกับการปรับปรุง DOM (เช่นการจัดการของ iElement = องค์ประกอบอินสแตนซ์ของแต่ละบุคคล) มันจะดำเนินการหลังจากที่แม่แบบได้รับการโคลน ตัวอย่างเช่นภายใน<li ng-repeat...>ฟังก์ชันลิงก์จะถูกดำเนินการหลังจาก<li>เทมเพลต (tElement) ถูกโคลน (เป็น iElement) สำหรับ<li>องค์ประกอบนั้น ๆ $watchช่วยให้คำสั่งจะได้รับการแจ้งการเปลี่ยนแปลงสถานที่ให้บริการขอบเขต (ขอบเขตที่มีความเกี่ยวข้องกับแต่ละกรณี) ซึ่งช่วยให้คำสั่งที่จะทำให้ค่าเช่นการปรับปรุงเพื่อ DOM
ฟังก์ชั่นควบคุม - จะต้องใช้เมื่อคำสั่งอื่นต้องการโต้ตอบกับคำสั่งนี้ ตัวอย่างเช่นในหน้าแรกของ AngularJS คำสั่งบานหน้าต่างจำเป็นต้องเพิ่มตัวเองในขอบเขตที่ดูแลโดยคำสั่งของแท็บดังนั้นคำสั่งของแท็บจำเป็นต้องกำหนดวิธีการควบคุม (คิดว่า API) ที่คำสั่งบานหน้าต่างสามารถเข้าถึง / โทรได้
สำหรับคำอธิบายเพิ่มเติมในเชิงลึกของแท็บและสั่งบานหน้าต่างและทำไมแท็บคำสั่งสร้างฟังก์ชั่นในตัวควบคุมที่ใช้this(มากกว่า$scope) โปรดดู'นี้' VS $ ขอบเขตในการควบคุม
โดยทั่วไปคุณสามารถใส่เมธอด$watchesและอื่น ๆ ลงในคอนโทรลเลอร์หรือฟังก์ชั่นลิงค์ของไดเรกทีฟ ตัวควบคุมจะทำงานก่อนซึ่งบางครั้งสำคัญ (ดูซอที่บันทึกเมื่อฟังก์ชั่น ctrl และลิงค์ทำงานด้วยสองคำสั่งซ้อนกัน) ดังที่ Josh กล่าวไว้ในความคิดเห็นคุณอาจต้องการใส่ฟังก์ชั่นการปรับขอบเขตในตัวควบคุมเพื่อความสอดคล้องกับส่วนที่เหลือของเฟรมเวิร์ก
mouseoverอีกขอบเขตหนึ่งสำหรับการเปลี่ยนแปลงคุณสมบัติ แตกต่างใหญ่
ฟังก์ชั่นการคอมไพล์ไม่มีสิทธิ์เข้าถึงขอบเขต แต่เป็นฟังก์ชันเสริม
ฉันแนะนำวิดีโอนี้จริงๆ เขียนคำสั่งโดย Misko Hevery (บิดาแห่ง AngularJS) ซึ่งเขาอธิบายความแตกต่างและเทคนิคบางอย่าง (ความแตกต่างระหว่างฟังก์ชั่นการคอมไพล์และฟังก์ชั่นลิงค์ที่เครื่องหมาย 14:41 ในวิดีโอ )
ระเบียบการเชิงมุม: เขียนตรรกะทางธุรกิจในคอนโทรลเลอร์และการจัดการ DOM ในลิงก์
นอกเหนือจากนี้คุณสามารถเรียกใช้ฟังก์ชันคอนโทรลเลอร์หนึ่งฟังก์ชันจากลิงก์ฟังก์ชันของคำสั่งอื่นตัวอย่างเช่นคุณมี 3 คำสั่งที่กำหนดเอง
<animal>
<panther>
<leopard></leopard>
</panther>
</animal>และคุณต้องการเข้าถึงสัตว์จากภายในของคำสั่ง "เสือดาว"
http://egghead.io/lessons/angularjs-directive-communicationจะเป็นประโยชน์ที่จะทราบเกี่ยวกับการสื่อสารระหว่างคำสั่ง
compileจะถูกดำเนินการก่อน controllerเสมอ
ฟังก์ชั่นการรวบรวม -
วากยสัมพันธ์
function compile(tElement, tAttrs, transclude) { ... }ตัวควบคุม
ลิงก์ล่วงหน้า
ฟังก์ชั่นลิงค์มีหน้าที่ในการลงทะเบียนผู้ฟัง DOM และอัปเดต DOM มันจะดำเนินการหลังจากที่แม่แบบได้รับการโคลน นี่คือจุดที่ตรรกะส่วนใหญ่จะถูกวาง
คุณสามารถอัพเดท dom ในคอนโทรลเลอร์ได้โดยใช้ angular.element แต่ไม่แนะนำเนื่องจากองค์ประกอบมีให้ในฟังก์ชั่นลิงค์
ฟังก์ชั่นการเชื่อมโยงล่วงหน้าใช้ในการสร้างลอจิกที่ทำงานเมื่อแองกูลาร์ js ได้ทำการรวบรวมองค์ประกอบลูก แต่ก่อนที่จะมีการเรียกลิงค์โพสต์ขององค์ประกอบลูกใด ๆ
โพสต์ลิงก์
คำสั่งที่มีฟังก์ชั่นเชื่อมโยงเท่านั้นมุมเชิงปฏิบัติหน้าที่เป็นลิงค์โพสต์
โพสต์จะถูกดำเนินการหลังจากคอมไพล์คอนโทรลเลอร์และ pre-link funciton ดังนั้นนี่จึงเป็นเหตุผลว่าทำไมสถานที่ที่ปลอดภัยที่สุดและเป็นค่าเริ่มต้นเพื่อเพิ่มตรรกะคำสั่งของคุณ