$ observ ()เป็นวิธีการในวัตถุคุณสมบัติและเป็นเช่นนั้นมันสามารถใช้ในการสังเกต / ดูการเปลี่ยนแปลงค่าของแอตทริบิวต์ DOM มันใช้ / เรียกภายในคำสั่งเท่านั้น ใช้ $ observ เมื่อคุณต้องการสังเกต / ดูแอตทริบิวต์ DOM ที่มีการแก้ไข (เช่น {{}})
เช่นattr1="Name: {{name}}"จากนั้นในคำสั่ง:attrs.$observe('attr1', ...).
(หากคุณลองscope.$watch(attrs.attr1, ...)ใช้งานจะไม่ทำงานเพราะ {{}} s - คุณจะได้รับundefined) ใช้ $ watch สำหรับทุกอย่าง
$ watch ()ซับซ้อนกว่า มันสามารถสังเกต / ดู "การแสดงออก" ซึ่งการแสดงออกสามารถเป็นได้ทั้งฟังก์ชั่นหรือสตริง ถ้านิพจน์เป็นสตริงมันจะเป็น $ parse 'd (เช่นประเมินว่าเป็นนิพจน์เชิงมุม ) ในฟังก์ชัน (เป็นฟังก์ชันนี้ที่เรียกว่าทุกรอบการย่อย) การแสดงออกของสตริงไม่สามารถมี {{}} $ watch เป็นวิธีการในวัตถุขอบเขตดังนั้นจึงสามารถใช้ / เรียกได้ทุกที่ที่คุณสามารถเข้าถึงวัตถุขอบเขตได้
- ตัวควบคุม - ตัวควบคุมใด ๆ - ตัวควบคุมที่สร้างขึ้นผ่าน ng-view, ng-controller หรือตัวควบคุมคำสั่ง
- ฟังก์ชั่นการเชื่อมโยงในคำสั่งเนื่องจากมีการเข้าถึงขอบเขตเช่นกัน
เนื่องจากมีการประเมินสตริงเป็นนิพจน์เชิงมุมดังนั้น $ watch จึงมักถูกใช้เมื่อคุณต้องการสังเกต / ดูคุณสมบัติโมเดล / ขอบเขต เช่น, attr1="myModel.some_prop"จากนั้นในฟังก์ชั่นควบคุมหรือลิงค์: scope.$watch('myModel.some_prop', ...)หรือscope.$watch(attrs.attr1, ...)(หรือscope.$watch(attrs['attr1'], ...))
(ถ้าคุณลองattrs.$observe('attr1')คุณจะได้รับสตริงmyModel.some_propซึ่งอาจไม่ใช่สิ่งที่คุณต้องการ)
ตามที่กล่าวไว้ในความเห็นเกี่ยวกับคำตอบ @ PrimosK ของ $ ทุกสังเกตและ $ นาฬิกามีการตรวจสอบทุกแยกแยะวงจร
คำสั่งที่มีขอบเขตแยกซับซ้อนกว่า หากมีการใช้ไวยากรณ์ '@' คุณสามารถ $ สังเกตหรือ $ ดูแอตทริบิวต์ DOM ที่มีการแก้ไข (เช่น {{}}) (เหตุผลที่ทำงานกับ $ watch นั้นเป็นเพราะไวยากรณ์ '@' ทำการแก้ไขให้เราดังนั้น $ watch จะเห็นสตริงที่ไม่มี {{}}) เพื่อให้ง่ายต่อการจดจำว่าจะใช้เมื่อใดฉันขอแนะนำให้ใช้ $ สังเกตสำหรับกรณีนี้ด้วย
เพื่อช่วยในการทดสอบทั้งหมดนี้ฉันได้เขียนPlunkerที่กำหนดสองแนวทาง หนึ่ง ( d1) ไม่สร้างขอบเขตใหม่อีกอัน ( d2) สร้างขอบเขตแยก แต่ละคำสั่งมีคุณลักษณะหกประการ แต่ละแอตทริบิวต์มีทั้ง $ observ'd และ $ watch'ed
<div d1 attr1="{{prop1}}-test" attr2="prop2" attr3="33" attr4="'a_string'"
attr5="a_string" attr6="{{1+aNumber}}"></div>
ดูบันทึกคอนโซลเพื่อดูความแตกต่างระหว่าง $ observ และ $ watch ในฟังก์ชันการลิงก์ จากนั้นคลิกลิงก์และดูว่า $ observes และ $ watches ใดถูกเรียกใช้โดยการเปลี่ยนแปลงคุณสมบัติที่ทำโดยตัวจัดการคลิก
โปรดสังเกตว่าเมื่อฟังก์ชันลิงก์ทำงานคุณลักษณะใด ๆ ที่มี {{}} ยังไม่ได้รับการประเมิน (ดังนั้นหากคุณลองตรวจสอบคุณสมบัติคุณจะได้รับundefined) วิธีเดียวที่จะเห็นค่าที่ถูกแก้ไขคือการใช้ $ observ (หรือ $ watch หากใช้ขอบเขต isolate ด้วย '@') ดังนั้นการรับค่าของแอ็ตทริบิวต์เหล่านี้เป็นการดำเนินการแบบอะซิงโครนัส (และนี่คือเหตุผลที่เราต้องการฟังก์ชัน $ observ และ $ watch)
บางครั้งคุณไม่ต้องการ $ observ หรือ $ watch เช่นถ้าแอตทริบิวต์ของคุณมีตัวเลขหรือบูลีน (ไม่ใช่สตริง) เพียงประเมินครั้งเดียว: แล้วในการพูดการฟังก์ชั่นการเชื่อมโยงของคุณ:attr1="22" var count = scope.$eval(attrs.attr1)หากเป็นเพียงสตริงคงที่ - attr1="my string"- ให้ใช้attrs.attr1ในคำสั่งของคุณ (ไม่จำเป็นต้องใช้ $ eval ())
ดูเพิ่มเติมที่Google กลุ่ม Vojta โพสต์เกี่ยวกับการแสดงออกของ $ watch