<div ng-controller="CounterCtrl">
  <span ng-bind="counter"></span>
  <button ng-click="counter++">increase</button>
</div>function CounterCtrl($scope) {
  $scope.counter = 1;
}

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
 <option value="name">Alphabetical</option>
 <option value="age">Newest</option>
</select>


<ul class="phones">
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  {{phone.name}}
  <p>{{phone.snippet}}</p>
 </li>
</ul>

function PhoneListCtrl($scope) {
 $scope.phones = [
  {"name": "Nexus S",
   "snippet": "Fast just got faster with Nexus S.",
   "age": 0},
  {"name": "Motorola XOOM",
   "snippet": "The Next, Next Generation tablet.",
   "age": 1},
  {"name": "MOTOROLA XOOM",
   "snippet": "The Next, Next Generation tablet.",
   "age": 2}
 ];

 $scope.orderProp = 'age';
}

function DataBinder( object_id ) {
 // Use a jQuery object as simple PubSub
 var pubSub = jQuery({});
 
 // We expect a `data` element specifying the binding
 // in the form: data-bind-<object_id>="<property_name>"
 var data_attr = "bind-" + object_id,
   message = object_id + ":change";
 
 // Listen to change events on elements with the data-binding attribute and proxy
 // them to the PubSub, so that the change is "broadcasted" to all connected objects
 jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
  var $input = jQuery( this );
 
  pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
 });
 
 // PubSub propagates changes to all bound elements, setting value of
 // input tags or HTML content of other tags
 pubSub.on( message, function( evt, prop_name, new_val ) {
  jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
   var $bound = jQuery( this );
 
   if ( $bound.is("input, textarea, select") ) {
    $bound.val( new_val );
   } else {
    $bound.html( new_val );
   }
  });
 });
 
 return pubSub;
}

function User( uid ) {
 var binder = new DataBinder( uid ),
 
   user = {
    attributes: {},
 
    // The attribute setter publish changes using the DataBinder PubSub
    set: function( attr_name, val ) {
     this.attributes[ attr_name ] = val;
     binder.trigger( uid + ":change", [ attr_name, val, this ] );
    },
 
    get: function( attr_name ) {
     return this.attributes[ attr_name ];
    },
 
    _binder: binder
   };
 
 // Subscribe to the PubSub
 binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
  if ( initiator !== user ) {
   user.set( attr_name, new_val );
  }
 });
 
 return user;
}

// javascript
var user = new User( 123 );
user.set( "name", "Wolfgang" );
 
// html
<input type="number" data-bind-123="name" />

app.controller('MainCtrl', function() {
 $scope.name = "Foo";

 $scope.changeFoo = function() {
   $scope.name = "Bar";
 }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

test/scope_spec.js 
-------
/* jshint globalstrict: true */  
/* global Scope: false */
'use strict';
describe("Scope", function() {
it("can be constructed and used as an object", function() { 
var scope = new Scope();
scope.aProperty = 1;
  expect(scope.aProperty).toBe(1);
 });
"htmlcode">

------
/* jshint globalstrict: true */
'use strict'; function Scope() {
}



在这个测试中，我们将一个属性(aProperty)赋值给了这个scope。这正是Scope上的属性运行的方式。它们就是正常的JavaScript属性，并没有什么特别之处。这里你完全不需要去调用一个特别的setter，也不需要对你赋值的类型进行什么限制。真正的魔法在于两个特别的函数：watch和digest。我们现在就来看看这两个函数。
②监视对象属性：watch和digest

watch和digest是同一个硬币的两面。它们二者同时形成了$digest循环的核心：对数据的变化做出反应。
为了实现这一块功能，我们首先来定义一个测试文件并断言你可以使用watch来注册一个监视器，并且当有人调用了digest的时候监视器的监听函数会被调用。
在scope_spec.js文件中添加一个嵌套的describe块。并创建一个beforeEach函数来初始化这个scope，以便我们可以在进行每个测试时重复它：
test/scope_spec.js   




------ 
describe("Scope", function() {
it("can be constructed and used as an object", function() { var scope = new Scope();
scope.aProperty = 1;
  expect(scope.aProperty).toBe(1);
 });
describe("digest", function() {
var scope;
beforeEach(function() { scope = new Scope();
});
it("calls the listener function of a watch on first $digest", function() { var watchFn = function() { return 'wat'; };
var listenerFn = jasmine.createSpy();
scope.$watch(watchFn, listenerFn);
   scope.$digest();
   expect(listenerFn).toHaveBeenCalled();
}); });
});



在上面的这个测试中我们调用了watch来在这个scope上注册一个监视器。我们现在对于监视函数本身并没有什么兴趣，因此我们随便提供了一个函数来返回一个常数值。作为监听函数，我们提供了一个JasmineSpy。接着我们调用了digest并检查这个监听器是否真正被调用。
首先，这个Scope需要有一些地方去存储所有被注册的监视器。我们现在就在Scope构造函数中添加一个数组存储它们：
src/scope.js




-----

function Scope(){
  this.$$watchers = [];
}



上面代码中的$$前缀在AngularJS框架中被认为是私有变量，它们不应该在应用的外部被调用。

现在我们可以来定义watch函数了。它接收两个函数作为参数，并且将它们储存在$watchers数组中。我们想要每一个Scope对象都拥有这个函数，因此我们将它添加到Scope的原型中：


src/scope.js  
-----
Scope.prototype.$watch = function(watchFn, listenerFn) {
 var watcher = {
  watchFn: watchFn,
  listenerFn: listenerFn
 };
this.$$watchers.unshift(watcher); 
};



最后我们应该有一个digest函数。现在，我们来定义一个digest函数的简化版本，它仅仅只是会迭代所有的注册监视器并调用它们的监听函数：

digest能够持续的迭代所有监视函数，直到被监视的值停止变化。多做几次digest是我们能够获得运用于监视器并依赖于其他监视器的变化。
首先，我们新建名为$$digestOnce，并且调整它以便它能够在所有监视器上运行一遍，然后返回一个布尔值来说明有没有任何变化：

src/scope.js 




----

Scope.prototype.$$digestOnce = function(){
  var length = this.$$watchers.length;
  var watcher, newValue, oldValue, dirty;
  while(length--){
    watcher = this.$$watchers[length];
    newValue = watcher.watchFn(this);
    oldValue= watcher.last;
    if(newValue !== oldValue){
      watcher.last == newValue;
      watcher.listenerFn(newValue, oldValue, this);
      dirty = true;
    }
  }
   return dirty;
};




接着，我们重定义digest以便它能够运行“外循环”，在变化发生时调用$digestOnce：
src/scope.js




-----
Scope.prototype.$digest = function(){
  var dirty;
  do {
    dirty = this.$$digestOnce();
  } while (dirty);
};



以上就是Angular数据双向绑定的相关介绍，希望对大家的学习有所帮助。