2、理解資料繫結

    自動資料繫結使我們可以將檢視理解為模型狀態的對映。當客戶端的資料模型發生變化時，檢視就能反映出這些變化，並且不需要寫任何自定義的程式碼，它就可以工作。

    AngularJS會記錄資料模型所包含的資料在任何特定時間點的值（在HelloWorld例子中就是name的值），而不是原始值。

     資料模型物件（modelobject）是指$scope物件。$scope物件是一個簡單的JavaScript物件，其中的屬性可以被檢視訪問，也可以同控制器進行互動。雙向資料繫結（bi-directional）意味著如果檢視改變了某個值，資料模型會通過髒檢查觀察到這個變化，而如果資料模型改變了某個值，檢視也會依據變化重新渲染。

資料繫結的最佳實踐

由於JavaScript自身的特點，以及它在傳遞值和引用時的不同處理方式，通常認為，在檢視中

通過物件的屬性而非物件本身來進行引用繫結，是Angular中的最佳實踐。

/*

 * 時鐘測試

 */

myDirec.controller("clockControl", function($scope,$timeout) {

   var updateClock = function() {

       $scope.clock = new Date();

       $timeout(function() {

            updateClock();

       }, 1000);

   };

   updateClock();

});

/*

 * 資料繫結最佳實踐（改進後）

 */

myDirec.controller("clockControl2", function($scope, $timeout) {

    $scope.clock = {

        now : new Date()

    };

    var updateClock = function() {

        $scope.clock.now = new Date();

    };

    setInterval(function() {

       $scope.$apply(updateClock);

    }, 1000);

   updateClock();

});

 

頁面測試：

<h3>資料繫結測試（時鐘）</h3>  

 <div ng-controller="clockControl">

<h1>Hello {{ clock }}!</h1>

</div>

<!--資料繫結最佳實踐  -->

 <div ng-controller="clockControl2">

<h1>Hello {{ clock.now }}!</h1>

</div>