angularjs中的雙向繫結原理解析

ITzhongzi發表於2017-03-31
AngularJS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../angular-1.5.8/angular.js"></script>
    <!-- 引入 ng 的庫, 支援功能 -->
</head>
<body ng-app>
    <!-- 
        提供 ng-app 的屬性說明讓 ng 來維護該標籤以及其後代的所有標籤 

        ng 是一個 mvvm 的框架, ng-app 表示這個 app 的 view
        在 提供 ng-app 以後, ng 會在程式碼的背後建立一個與之對應的 物件. 稱為 $rootScope

        如果想要訪問這個 $rootScope, 就需要申請一下
            .run( [ '$rootScope', function ( $rootScope ) {
            }]) 
        (這個run方法相當於 window中的onload方法，用於初始化資料)

        此時, ng 提供了雙向資料繫結的功能( 一大特點 )
        雙向資料繫結: 介面 View 與 檢視模型 ViewModel 之間的資料同步行為.

        此時 ViewModel 就是 $rootScope, View 就是整個 body 標籤

        一旦介面中含有資料的改變, 就會同步到 背後的 這個 $rootScope 上屬性的改變.
        同時 背後的 物件 $rootScope 的屬性發生改變, 也會同步到介面中.

        在介面中凡是使用表示式( expression, 此時指 {{}}  中的名字與 ng-model 中的名字 )
        含有的名字都會在背後的 $rootScope 中被建立出來.
    -->
    <input type="text" ng-model="txt">
    <!-- 
        此時 ng-model="txt" 和 {{ txt }} 說明了背後 $rootScope 中含有屬性 txt 
        當使用者在 輸入框中輸入文字的時候, 此時發生了:
        1> 文字框中資料發生變化
        2> 通知背後的 $rootScope 修改 對應屬性 txt 的值
        3> 背後 $rootScope 中屬性的值發生了變化
        4> 通知介面修改屬性. ng 會"遍歷" 介面中有多少地方使用了該名字, 然後依次同步
        5> 在此例中有兩個 txt, 因此依次通知
        6> 通知 input 標籤, 發現值一樣, ok 忽略
        7> 通知 {{ }}, 原來沒有資料, 和現在的資料不一樣, 更新資料
        8> 通知背後的 $rootScope 改變. 發現值一樣, 結束迴圈檢查的過程
    -->
    <div>你好, {{ txt }}</div>
</body>
</html>

相關文章