AngularJS 프레임워크에서 데이터의 양방향 바인딩 적용 사례 분석

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

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();
});

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

<p 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>
</p>

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

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

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

if (typeof watchExp == 'string' && get.constant) {
 var originalFn = watcher.fn;
 watcher.fn = function(newVal, oldVal, scope) {
  originalFn.call(this, newVal, oldVal, scope);
  arrayRemove(array, watcher);
 };
}

$$watchers = [
  {
    eq: false, // 表明我们是否需要检查对象级别的相等
    fn: function( newValue, oldValue ) {}, // 这是我们提供的监听器函数
    last: 'Ryan', // 变量的最新值
    exp: function(){}, // 我们提供的watchExp函数
    get: function(){} // Angular's编译后的watchExp函数
  }
];

   
$apply: function(expr) {
  try {
   beginPhase('$apply');
   return this.$eval(expr);
  } catch (e) {
   $exceptionHandler(e);
  } finally {
   clearPhase();
   try {
    $rootScope.$digest();
   } catch (e) {
    $exceptionHandler(e);
    throw e;
   }
  }
}

var ngEventDirectives = {};
forEach(
 'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
 function(name) {
  var directiveName = directiveNormalize('ng-' + name);
  ngEventDirectives[directiveName] = ['$parse', function($parse) {
   return {
    compile: function($element, attr) {
     var fn = $parse(attr[directiveName]);
     return function ngEventHandler(scope, element) {
      element.on(lowercase(name), function(event) {
       scope.$apply(function() {
        fn(scope, {$event:event});
       });
      });
     };
    }
   };
  }];
 }
);

$scope.$watch(function ngModelWatch() {
  var value = ngModelGet($scope);
 
  //如果作用域模型值和ngModel值没有同步
  if (ctrl.$modelValue !== value) {
 
    var formatters = ctrl.$formatters,
      idx = formatters.length;
 
    ctrl.$modelValue = value;
    while(idx--) {
      value = formatters[idx](value);
    }
 
    if (ctrl.$viewValue !== value) {
      ctrl.$viewValue = value;
      ctrl.$render();
    }
  }
 
  return value;
});

var Scope = function( ) {
  this.$$watchers = []; 
};
 
Scope.prototype.$watch = function( ) {
 
};
 
Scope.prototype.$digest = function( ) {
 
};

var Scope = function( ) {
  this.$$watchers = []; 
};
 
Scope.prototype.$watch = function( watchExp, listener ) {
  this.$$watchers.push( {
    watchExp: watchExp,
    listener: listener || function() {}
  } );
};
 
Scope.prototype.$digest = function( ) {
 
};

var Scope = function( ) {
  this.$$watchers = []; 
};
 
Scope.prototype.$watch = function( watchExp, listener ) {
  this.$$watchers.push( {
    watchExp: watchExp,
    listener: listener || function() {}
  } );
};
 
Scope.prototype.$digest = function( ) {
  var dirty;
 
  do {
      dirty = false;
 
      for( var i = 0; i < this.$$watchers.length; i++ ) {
        var newValue = this.$$watchers[i].watchExp(),
          oldValue = this.$$watchers[i].last;
 
        if( oldValue !== newValue ) {
          this.$$watchers[i].listener(newValue, oldValue);
 
          dirty = true;
 
          this.$$watchers[i].last = newValue;
        }
      }
  } while(dirty);
};

var Scope = function( ) {
  this.$$watchers = []; 
};
 
Scope.prototype.$watch = function( watchExp, listener ) {
  this.$$watchers.push( {
    watchExp: watchExp,
    listener: listener || function() {}
  } );
};
 
Scope.prototype.$digest = function( ) {
  var dirty;
 
  do {
      dirty = false;
 
      for( var i = 0; i < this.$$watchers.length; i++ ) {
        var newValue = this.$$watchers[i].watchExp(),
          oldValue = this.$$watchers[i].last;
 
        if( oldValue !== newValue ) {
          this.$$watchers[i].listener(newValue, oldValue);
 
          dirty = true;
 
          this.$$watchers[i].last = newValue;
        }
      }
  } while(dirty);
};
 
 
var $scope = new Scope();
 
$scope.name = 'Ryan';
 
$scope.$watch(function(){
  return $scope.name;
}, function( newValue, oldValue ) {
  console.log(newValue, oldValue);
} );
 
  
$scope.$digest();

Ryan undefined

var Scope = function( ) {
  this.$$watchers = []; 
};
 
Scope.prototype.$watch = function( watchExp, listener ) {
  this.$$watchers.push( {
    watchExp: watchExp,
    listener: listener || function() {}
  } );
};
 
Scope.prototype.$digest = function( ) {
  var dirty;
 
  do {
      dirty = false;
 
      for( var i = 0; i < this.$$watchers.length; i++ ) {
        var newValue = this.$$watchers[i].watchExp(),
          oldValue = this.$$watchers[i].last;
 
        if( oldValue !== newValue ) {
          this.$$watchers[i].listener(newValue, oldValue);
 
          dirty = true;
 
          this.$$watchers[i].last = newValue;
        }
      }
  } while(dirty);
};
 
 
var $scope = new Scope();
 
$scope.name = 'Ryan';
 
var element = document.querySelectorAll('input');
 
element[0].onkeyup = function() {
  $scope.name = element[0].value;
 
  $scope.$digest();
};
 
$scope.$watch(function(){
  return $scope.name;
}, function( newValue, oldValue ) {
  console.log('Input value updated - it is now ' + newValue);
 
  element[0].value = $scope.name;
} );
 
var updateScopeValue = function updateScopeValue( ) {
  $scope.name = 'Bob';
  $scope.$digest();
};