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">&lt;input type=&quot;text&quot; id=&quot;text&quot; ng-model=&quot;name&quot;/&gt;</pre><div class="contentsignin">登入後複製</div></div>透過

ng-model

我們可以很容易的將輸入框(
1. view

   )的值和

   name
(
Model
1. ) 關聯起來。在雙向資料流的作用下，無論是我們修改輸入框的值或修改

   name，另外一側都會及時更新到新資料。 ng-model 是 angularjs 內建的一個指令用來實現雙向綁定。 ng-model

   在不同生命週期中，有不同的邏輯處理。

2. compilation phase:

   #ng-model
指令和
input
2. 指令會合併處理給

   input

   標籤註冊
keydown
事件(DOM Event);

1. ##interpolation

   則註冊一個
$watch
2. 用來訂閱

   change 事件(angularjs Event)。 Runtime Phase

3. #使用者輸入觸發keydown

4. input  指令捕捉keydown

   事件，呼叫
$apply
5. 來要求更新動作。

   angularjs 更新值到Model

   #進入
$digest
6. 上下文

$watch
7. 表達式偵測到 

   Model

     發生了
change
，通知

interpolation

，請求更新

DOM

。 angularjs 託管結束，退出託管，交還控制權到 JavaScript 執行上下文。 最後瀏覽器重新渲染文字。

One-way-binding

不同於Two-way-binding的雙向流動，one-way- binding 的資料流向是單向，即只會從model 流向view

，而不會從

view 流向model 。因此， one-way-binding

用來展示數據，而不是取得輸入。

1. 在

   angularjs

   中，
one-way-binding
則有兩種語法：
1. ng-bind

   和{{expression} }。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span ng-bind=&quot;name&quot;&gt; &lt;/span&gt; &lt;span&gt;{{name}}&lt;/span&gt;</pre><div class="contentsignin">登入後複製</div></div>對於 one-way-binding來說，內部機制和

   two-way-binding
有部分相同的機制。

2. compilation phase:

1. #interpolation 註冊一個$watch

   用來訂閱
change
2. 事件(angularjs Event)。

   runtime phase：

#angularjs
3. 進入

   $digest 。

4. 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 可以确认是否要更新数据。

文中难免存在一些错误，欢迎大家斧正。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

jQuery/Vue的鼠标移入移出效果

addEventListener中的EventListener的接口对象

以上是angularjs的資料綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！