這篇文章介紹angularjs的資料綁定的介紹，裡面有很多與angularjs的資料綁定的方法和實例程式碼，希望對大家有幫助，現在一起來看這篇文章吧
angularjs 的資料綁定
#在angularjs1.X 中存在了三種資料綁定的方式，用於資料的同步、展示。在angularjs 1.3 之前，angularjs 只存在兩種方式： two-way-binding 和one-way-bindng , 而後則引入了稱為one-time-binding 的綁定機制。
目前angularjs 中存在以下三種資料綁定方式：
two-way-binding
-
one-way-binding
one-time-binding
two-way-binding
# #angularjs 中的Two-way-binding 的作用是將Model 和
View
關聯起來，任何一邊的資料變更都會更新另一側的數據。 資料模型。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input type="text" id="text" ng-model="name"/></pre><div class="contentsignin">登入後複製</div></div>透過
ng-model
我們可以很容易的將輸入框(- view
)的值和
name (Model- ) 關聯起來。在雙向資料流的作用下，無論是我們修改輸入框的值或修改
name，另外一側都會及時更新到新資料。 是 angularjs 內建的一個指令用來實現雙向綁定。 ng-model
在不同生命週期中，有不同的邏輯處理。
-
compilation phase:
#ng-model 指令和
input- 指令會合併處理給
input
標籤註冊 keydown事件(DOM Event);-
則註冊一個 $watch- 用來訂閱
change 事件(angularjs Event)。
#使用者輸入觸發keydown
-
input 指令捕捉keydown
事件，呼叫 $apply- 來要求更新動作。
更新值到Model
#進入 $digest- 上下文
$watch- 表達式偵測到
Model
發生了 change
，通知
interpolation
，請求更新
DOM
。 angularjs 託管結束，退出託管，交還控制權到 JavaScript 執行上下文。
One-way-binding
不同於Two-way-binding的雙向流動，one-way- binding 的資料流向是單向，即只會從model 流向view
，而不會從
view 流向model 。因此， one-way-binding
用來展示數據，而不是取得輸入。
- 在
angularjs
中， one-way-binding 則有兩種語法： - ng-bind
和{{expression} }。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span ng-bind="name"> </span>
<span>{{name}}</span></pre><div class="contentsignin">登入後複製</div></div>對於 one-way-binding來說，內部機制和
two-way-binding 有部分相同的機制。
-
compilation phase:
-
註冊一個$watch
用來訂閱 change- 事件(angularjs Event)。
#angularjs- 進入
$digest 。
-
expression
的 $watch
偵測到資料發生變更，通知
interpolation
，要求更新
DOM
。 angularjs 託管結束，退出託管，交還控制權到 JavaScript 執行上下文。
one-time-binding#########1.3### 之後，###angularjs### 實作了一個叫做###one -time-binding### 的機制。本質上它的機制和其他兩種方式沒太多差異，但在數據更新時候表現的不太一樣。 #########one-time-binding### 同樣會註冊###$watch### 來監聽資料變化，但它會在第一次偵測到資料###非Undefined## # 時候取消監聽。 ###
<span>{{::name}}</span>登入後複製
对于上面的代码，假设 name 从 undefined -> angularjs -> angular ，最终渲染的结果是 angularjs ,而不是 angular 。 这就是 one-time-binding 的特殊之处，当 name 从 undefined 变化为 angularjs之后，被认定为 name 的状态已经是 stable ，因此将取消 $watch , 即不再监听数据变化。
那么，假设 name 从 '' -> angularjs-> angular， 则渲染结果是 '' ，即空字符串(第一次的值)。因为 one-time-binding 在计算 stable 时候使用的 严格相等，即 newVal === undefined, 如果是，则继续保留 $watch 等待下一次的比较；否则，状态变更为 stable，取消 $watch， 数据转化为最终态。
结束
在我看来，angularjs 核心在于 angularjs context 和 $digest 。
angularjs context 保证 angularjs 可以捕获到各种事件，用户输入、鼠标事件、键盘事件、甚至 $settimeout和 $http 等异步行为的状态流转。
而 $digest 则保证 angularjs 可以确认是否要更新数据。
本篇关于angularjs的文章到这也就结束了（想看更多就到PHP中文网angularjs参考手册中学习），有问题的可以在下方留言提问。
以上是關於angularjs的資料綁定的介紹，這裡有詳細的解釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！
