angualrjs 指令之scope

  1. 默認 (scope: false) - directive使用原有作用域,所以也不存在原型繼承,這種方式很簡單,但也很容易出問題——除非該directive與html不存在數據綁定,否則一般情況建議使用第2條方式。
  2. scope: true - directive創建一個子作用域, 並且會從父作用域進行原型繼承。 如果同一個DOM element存在多個directives要求創建子作用域,那麼只有一個子作用域被創建,directives共用該子作用域。
  3. scope: { ... } - directive創建一個獨立的“Isolate”作用域,沒有原型繼承。這是創建可複用directive組件的最佳選擇。因爲它不會直接訪問/修改父作用域的屬性,不會產生意外的副作用。這種directive與父作用域進行數據通信有如下四種方式(更詳細的內容請參考Developer Guide):

    1. = or =attr “Isolate”作用域的屬性與父作用域的屬性進行雙向綁定,任何一方的修改均影響到對方,這是最常用的方式;
    2. @ or @attr “Isolate”作用域的屬性與父作用域的屬性進行單向綁定,即“Isolate”作用域只能讀取父作用域的值,並且該值永遠的String類型
    3. & or &attr “Isolate”作用域把父作用域的屬性包裝成一個函數,從而以函數的方式讀寫父作用域的屬性,包裝方法是$parse,詳情請見API-$parse

    “Isolate”作用域的__proto__是一個標準Scope object (the picture below needs to be updated to show an orange 'Scope' object instead of an 'Object'). “Isolate”作用域的$parent同樣指向父作用域。它雖然沒有原型繼承,但它仍然是一個子作用域。


發佈了28 篇原創文章 · 獲贊 2 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章