雙向繫結
雙向繫結是AngularJS最實用的功能，它節省了大量的代碼，使我們專註於資料和視圖，不用浪費大量的代碼在Dom監聽、資料同步上，關於雙向更新，可看下圖：
資料-->視圖
這裡我們只示範有了資料以後，如何綁定到視圖上。
<!DOCTYPE html><html ng-app="App"><head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.username='張三' $scope.changename=function(){ $scope.username='李四'; } }); </script></head> <body> <div ng-controller ="ctrl"> <button class='btn btn-primary' ng-click='changename();'> username='李四' </button> <!--頁面載入初期，使用者可能會看到綁定的運算式--> <div>{{username}}</div> <!--此綁定不會出現上述情況--> <div ng-bind='username'></div> </div> </body></html>
點擊按鈕之後，div內容變成 李四，效果如圖：
視圖—>資料
上個例子，我們看了資料變化後，視圖也會自動變化。那麼這個例子則是反過來，視圖變化，導致資料也跟著變化，那麼資料變化後，我們如何知道呢，這兒我們可以通過另外一個元素將資料再顯示出來。
<!DOCTYPE html><html ng-app="App"><head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.username='張三' }); </script></head> <body> <div ng-controller ="ctrl"> <input type='text' ng-model='username' /> <div>{{username}}</div> </div> </body></html>
查看效果：
實現機制
angular對常用的dom事件，xhr事件等做了封裝， 在裡面觸發進入angular的digest流程。
在digest流程裡面， 會從rootscope開始遍曆， 檢查所有的watcher。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
