feat(ngModel): support object equality watch via ngModelOptions

Author: Narretz

src/ng/directive/ngModel.js

@@ -806,43 +806,67 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
     }
   };
 
-  // model -> value
-  // Note: we cannot use a normal scope.$watch as we want to detect the following:
-  // 1. scope value is 'a'
-  // 2. user enters 'b'
-  // 3. ng-change kicks in and reverts scope value to 'a'
-  //    -> scope value did not change since the last digest as
-  //       ng-change executes in apply phase
-  // 4. view should be changed back to 'a'
-  $scope.$watch(function ngModelWatch() {
+  this.$$setupModelWatch = function() {
+    // model -> value
+    // Note: we cannot use a normal scope.$watch as we want to detect the following:
+    // 1. scope value is 'a'
+    // 2. user enters 'b'
+    // 3. ng-change kicks in and reverts scope value to 'a'
+    //    -> scope value did not change since the last digest as
+    //       ng-change executes in apply phase
+    // 4. view should be changed back to 'a'
+
+    // options.deepWatch
+    // options.collection
+
+    getModelValueSetter();
+    $scope.$watch(ngModelWatch);
+  };
+
+  var modelValueSetter = function modelValueSetterDefault (modelValue) {
+    return modelValue;
+  };
+
+  function getModelValueSetter() {
+    if (ctrl.$options && ctrl.$options.deepWatch) {
+      modelValueSetter = function modelValueSetterCopy (modelValue) {
+        return copy(modelValue);
+      };
+    }
+  }
+
+  function ngModelWatch() {
     var modelValue = ngModelGet($scope);
 
     // if scope model value and ngModel value are out of sync
-    // TODO(perf): why not move this to the action fn?
     if (modelValue !== ctrl.$modelValue &&
        // checks for NaN is needed to allow setting the model to NaN when there's an asyncValidator
        (ctrl.$modelValue === ctrl.$modelValue || modelValue === modelValue)
     ) {
-      ctrl.$modelValue = ctrl.$$rawModelValue = modelValue;
-      parserValid = undefined;
+      modelToViewAction(modelValue);
+    }
+    return modelValue;
+  }
 
-      var formatters = ctrl.$formatters,
-          idx = formatters.length;
+  function modelToViewAction(modelValue) {
+    ctrl.$modelValue = ctrl.$$rawModelValue = modelValueSetter(modelValue);
+    parserValid = undefined;
 
-      var viewValue = modelValue;
-      while (idx--) {
-        viewValue = formatters[idx](viewValue);
-      }
-      if (ctrl.$viewValue !== viewValue) {
-        ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
-        ctrl.$render();
+    var formatters = ctrl.$formatters,
+        idx = formatters.length;
 
-        ctrl.$$runValidators(modelValue, viewValue, noop);
-      }
+    var viewValue = modelValue;
+    while (idx--) {
+      viewValue = formatters[idx](viewValue);
     }
+    if (ctrl.$viewValue !== viewValue) {
+      ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
+      ctrl.$render();
+
+      ctrl.$$runValidators(modelValue, viewValue, noop);
+    }
+  }
 
-    return modelValue;
-  });
 }];
 
 
@@ -1032,6 +1056,7 @@ var ngModelDirective = ['$rootScope', function($rootScope) {
               formCtrl = ctrls[1] || modelCtrl.$$parentForm;
 
           modelCtrl.$$setOptions(ctrls[2] && ctrls[2].$options);
+          modelCtrl.$$setupModelWatch();
 
           // notify others, especially parent forms
           formCtrl.$addControl(modelCtrl);

test/ng/directive/ngModelSpec.js

@@ -30,6 +30,7 @@ describe('ngModel', function() {
 
       //Assign the mocked parentFormCtrl to the model controller
       ctrl.$$parentForm = parentFormCtrl;
+      ctrl.$$setupModelWatch();
     }));
 
 
@@ -1790,6 +1791,19 @@ describe('ngModelOptions attributes', function() {
 
   var helper, $rootScope, $compile, $timeout, $q;
 
+  beforeEach(module(function($compileProvider) {
+    $compileProvider.directive('formatObject', function() {
+      return {
+        require: 'ngModel',
+        link: function(scope, element, attrs, ngModelCtrl) {
+          ngModelCtrl.$formatters.push(function(value) {
+            return value.a + value.b;
+          });
+        }
+      };
+    });
+  }));
+
   beforeEach(function() {
     helper = getInputCompileHelper(this);
   });
@@ -2402,4 +2416,21 @@ describe('ngModelOptions attributes', function() {
     expect($rootScope.value).toBe('modelValue');
     expect($rootScope.changed).toHaveBeenCalledOnce();
   });
+
+
+  it('should watch the model with object equality if deepWatch is true', function() {
+    $rootScope.value = {
+      a: 'alpha',
+      b: 'beta',
+    };
+
+    var input = helper.compileInput('<input type="text" format-object ng-model="value" ' +
+      'ng-model-options="{deepWatch:  true}" >');
+
+    expect(input.val()).toBe('alphabeta');
+
+    $rootScope.value.b = 'gamma';
+    $rootScope.$digest();
+    expect(input.val()).toBe('alphagamma');
+  });
 });