數(shù)據(jù)綁定

通過把一個文本輸入框綁定到person.name屬性上，就能把我們的應用變得更有趣一點。這一步建立起了文本輸入框跟頁面的雙向綁定。

在這個語境里“雙向”意味著如果view改變了屬性值，model就會“看到”這個改變，而如果model改變了屬性值，view也同樣會“看到”這個改變。Angular.js 為你自動搭建好了這個機制。如果你好奇這具體是怎么實現(xiàn)的，請看我們之后推出的一篇文章，其中深入討論了digest_loop 的運作。

要建立這個綁定，我們在文本輸入框上使用ng-model 指令屬性，像這樣：

<div ng-controller="MyController"> <input type="text" ng-model="person.name" placeholder="Enter your name" /> <h5>Hello {{ person.name }}</h5></div>

現(xiàn)在我們建立好了一個數(shù)據(jù)綁定（沒錯，就這么容易），來看看view怎么改變model吧：

試試看：

當你在文本框里輸入時，下面的名字也自動隨之改變，這就展現(xiàn)了我們數(shù)據(jù)綁定的一個方向：從view到model。

我們也可以在我們的（客戶端）后臺改變model，看這個改變自動在前端體現(xiàn)出來。要展示這一過程，讓我們在  MyController 的model里寫一個計時器函數(shù)， 更新 $scope 上的一個數(shù)據(jù)。下面的代碼里，我們就來創(chuàng)建這個計時器函數(shù)，它會在每秒計時（像鐘表那樣），并更新 $scope 上的clock變量數(shù)據(jù)：

app.controller('MyController', function($scope) { $scope.person = { name: "Ari Lerner" }; var updateClock = function() {  $scope.clock = new Date(); }; var timer = setInterval(function() {  $scope.$apply(updateClock); }, 1000); updateClock();});

可以看到，當我們改變model中clock變量的數(shù)據(jù)，view會自動更新來反映此變化。用大括號我們就可以很簡單地讓clock變量的值顯示在view里：

<div ng-controller="MyController"> <h5>{{ clock }}</h5></div>

互動

前面我們把數(shù)據(jù)綁定在了文本輸入框上。請注意， 數(shù)據(jù)綁定并非只限于數(shù)據(jù)，我們還可以利用綁定調用 $scope 中的函數(shù)（這一點之前已經(jīng)提到過）。

對按鈕、鏈接或任何其他的DOM元素，我們都可以用另一個指令屬性來實現(xiàn)綁定：ng-click 。這個 ng-click 指令將DOM元素的鼠標點擊事件（即 mousedown 瀏覽器事件）綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發(fā)點擊事件時，此被綁定的方法就被調用。跟上一個例子相似，這個綁定的代碼如下：

<div ng-controller="DemoController"> <h4>The simplest adding machine ever</h4> <button ng-click="add(1)" class="button">Add</button> <button ng-click="subtract(1)" class="button">Subtract</button> <h4>Current count: {{ counter }}</h4></div>

不論是按鈕還是鏈接都會被綁定到包含它們的DOM元素的controller所有的 $scope 對象上，當它們被鼠標點擊，Angular就會調用相應的方法。注意當我們告訴Angular要調用什么方法時，我們將方法名寫進帶引號的字符串里。

app.controller('DemoController', function($scope) { $scope.counter = 0; $scope.add = function(amount) { $scope.counter += amount; }; $scope.subtract = function(amount) { $scope.counter -= amount; };});

 請看：

$scope.$watch

$scope.$watch( watchExp, listener, objectEquality );

為了監(jiān)視一個變量的變化，你可以使用$scope.$watch函數(shù)。這個函數(shù)有三個參數(shù)，它指明了”要觀察什么”(watchExp)，”在變化時要發(fā)生什么”(listener),以及你要監(jiān)視的是一個變量還是一個對象。當我們在檢查一個參數(shù)時，我們可以忽略第三個參數(shù)。例如下面的例子：

$scope.name = 'Ryan';$scope.$watch( function( ) {  return $scope.name;}, function( newValue, oldValue ) {  console.log('$scope.name was updated!');} );

AngularJS將會在$scope中注冊你的監(jiān)視函數(shù)。你可以在控制臺中輸出$scope來查看$scope中的注冊項目。

你可以在控制臺中看到$scope.name已經(jīng)發(fā)生了變化