AngularJS中的綁定和消化如何工作？

將AngularJS與其他JavaScript-MVC框架區分開來的一件事是它能夠使用綁定將綁定值從JavaScript回顯爲HTML。當你將任何值賦給$ scope變量時，Angular會自動執行此操作。AngularJS中的綁定和消化如何工作？

但是這是多麼自動？有時，Angular不會接受更改，因此我需要調用$ scope。$ apply（）或$ scope。$ digest（）來通知角度以獲取更改。有時當我運行這些方法時，它會拋出一個錯誤，並說摘要已經在進行中。

由於綁定（{{}}括號或ng屬性內的任何內容）都與eval一起回顯，這是否意味着Angular不斷輪詢$ scope對象以查找更改，然後執行eval來推送這些更改到DOM/HTML？或者AngularJS以某種方式計算出使用魔術變量來觸發變量值更改或分配時觸發的事件？我從來沒有聽說過它被所有瀏覽器完全支持，所以我對此表示懷疑。

AngularJS如何跟蹤它的綁定和範圍變量？

來源

2012-09-17 matsko

我發現http://docs.angularjs.org/guide/concepts#runtime中以「這是關於Hello world示例如何實現數據綁定效果的解釋」爲開始的部分很有幫助。 –

這篇文章也是有用的，如果你還沒有看到它：http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933 – Gloopy

評論你的第一個聲明段落：Angular的「回聲綁定的能力使用綁定將JavaScript中的值轉換爲HTML「聽起來像是說」數據綁定「的混淆方式。此時此刻它並沒有真正將Angular與其他框架（如Ember或React）區分開來。這個問題很有用，不要誤解我的意思。但是，第一段只是一個我不同意的觀點 - 我會編輯這個問題，但我覺得不夠權威。 –

除了Mark發現的documentation section，我認爲我們可以嘗試列舉所有可能的變化來源。

與HTML輸入用戶交互（'text'，'number'，'url'，'email'，'radio'，'checkbox'）。 AngularJS有inputDirective。 '文字'，'數字'，'網址'和'電子郵件'輸入綁定listener handler'輸入'或'keydown'事件。監聽器處理程序calls scope.$apply。 'radio'和'checkbox'爲點擊事件綁定類似的處理器。
與select元素的用戶交互。 AngularJS的selectDirective在'change'事件上有類似的行爲。
定期更改使用$timeout service那也做$rootScope.$apply()。
eventDirectives（ngClick等）也使用scope.$apply。
$ http也使用$rootScope.$apply()。
AngularJS世界以外的變化應該使用scope。$ apply，如你所知。

來源

2012-09-19 08:52:58

對於點「5」。 $ http也使用$ rootScope。$ apply（）。「哎呀。有誰知道他們爲什麼這樣做？這非常煩人...... – gecco

當你發現它不是輪詢，而是使用它的內部執行循環，這就是爲什麼你需要使用$ apply（）或$ digest（）來啓動事情。

Miško's explanation是非常徹底的，但有點缺失的是，Angular只是試圖讓$ scope在它自己的上下文中發生任何事情時回到明確的內部狀態。這可能需要在模型狀態之間進行一些反彈，所以這也是爲什麼你不能僅僅依靠$ watch（）觸發一次，以及爲什麼你應該小心手動建立模型之間的關係，否則你最終會陷入無窮無盡循環刷新。

來源

2012-09-19 00:23:49 dain

那麼$ apply（someFn）如何工作？在應用迭代執行時是否會執行someFn的內容？ – matsko

With $ apply代碼在Angular作用域中執行，它只是爲了通知它需要消化更改，請參閱：http://docs.angularjs.org/api/ng.$rootScope.Scope#$應用 – dain

如果您想防止與$摘要相沖突，則必須檢查$階段：https：//groups.google.com/d/msg/angular/FJwxJ-XbJaE/1NavZNQBhf4J – dain

AngularJS中的綁定和消化如何工作？

回答

相關問題