feat(ngModel): determine context for getter/setter bindings

When using a getter/setter function for ngModel, attempt to determine the appropriate context by
parsing the ngModel expression. If the context cannot be found, fallback to using the current scope.
For example, '<input ng-model="someObject.value" ng-model-options="{ getterSetter: true }">' will
use 'someObject' as the calling context.

Non-assignable ngModel expressions will always fallback to using the current scope as the context.
For example, '<input ng-model="someObject.getValueFn()" ng-model-options="{ getterSetter: true }">'
will invoke the result of 'someObject.getValueFn()' from the current scope.

Closes #9394

BREAKING CHANGE: previously, getter/setter functions would always be called from the global context.
This behaviour was unexpected by some users, as described in #9394, and is not particularly nice
anyways.  Applications that relied on this behaviour can use `$window` instead of `this` to access
the global object... but they probably shouldn't be storing global state anyways!

Author: NevilleS

src/ng/directive/input.js

@@ -1716,13 +1716,14 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
 
 
   var parsedNgModel = $parse($attr.ngModel),
+      parsedNgModelContext = null,
       pendingDebounce = null,
       ctrl = this;
 
   var ngModelGet = function ngModelGet() {
     var modelValue = parsedNgModel($scope);
     if (ctrl.$options && ctrl.$options.getterSetter && isFunction(modelValue)) {
-      modelValue = modelValue();
+      modelValue = modelValue.call(parsedNgModelContext ? parsedNgModelContext($scope) : $scope);
     }
     return modelValue;
   };
@@ -1732,7 +1733,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
     if (ctrl.$options && ctrl.$options.getterSetter &&
         isFunction(getterSetter = parsedNgModel($scope))) {
 
-      getterSetter(ctrl.$modelValue);
+      getterSetter.call(parsedNgModelContext ? parsedNgModelContext($scope) : $scope, ctrl.$modelValue);
     } else {
       parsedNgModel.assign($scope, ctrl.$modelValue);
     }
@@ -1741,6 +1742,16 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
   this.$$setOptions = function(options) {
     ctrl.$options = options;
 
+    if (ctrl.$options && ctrl.$options.getterSetter && parsedNgModel && parsedNgModel.assign) {
+      // Match everything before the last dot as the context. For example, if ngModel is
+      // 'someObject.getter', use 'someObject' as the context. This is safe, since we require
+      // ngModel to be assignable; therefore, it's impossible to have dots used for anything but
+      // an operator (e.g. 'someObject.getter("string.with.dots")' is non-assignable)
+      var match = $attr.ngModel.match(/(.+)\./);
+      if (match && match[1]) {
+        parsedNgModelContext = $parse(match[1]);
+      }
+    }
     if (!parsedNgModel.assign && (!options || !options.getterSetter)) {
       throw $ngModelMinErr('nonassign', "Expression '{0}' is non-assignable. Element: {1}",
           $attr.ngModel, startingTag($element));

test/ng/directive/inputSpec.js

@@ -1975,6 +1975,78 @@ describe('input', function() {
           'ng-model-options="{ getterSetter: true }" />');
     });
 
+    it('should try to invoke a model with default context if getterSetter is true and ngModel is non-assignable', function() {
+      scope.value = 'scopeContext';
+      compileInput(
+        '<input type="text" ng-model="someService.getGetterSetterFn()" '+
+          'ng-model-options="{ getterSetter: true }" />');
+
+      scope.someService = {
+        value: 'b',
+        getterSetter: function(newValue) {
+          this.value = newValue || this.value;
+          return this.value;
+        },
+        getGetterSetterFn: function() {
+          return this.getterSetter;
+        }
+      };
+      spyOn(scope.someService, 'getterSetter').andCallThrough();
+      scope.$apply();
+      expect(inputElm.val()).toBe('scopeContext');
+      expect(scope.someService.getterSetter).toHaveBeenCalledWith();
+      expect(scope.someService.value).toBe('b'); // 'this' is not bound to the service w/o ngModelContext
+      expect(scope.value).toBe('scopeContext');
+
+      changeInputValueTo('a');
+      expect(scope.someService.getterSetter).toHaveBeenCalledWith('a');
+      expect(scope.someService.value).toBe('b');
+      expect(scope.value).toBe('a');
+
+      scope.someService.value = 'c';
+      scope.$apply();
+      expect(inputElm.val()).toBe('a');
+      expect(scope.someService.getterSetter).toHaveBeenCalledWith();
+      expect(scope.someService.value).toBe('c');
+      expect(scope.value).toBe('a');
+
+      scope.value = 'd';
+      scope.$apply();
+      expect(inputElm.val()).toBe('d');
+      expect(scope.someService.getterSetter).toHaveBeenCalledWith();
+      expect(scope.someService.value).toBe('c');
+      expect(scope.value).toBe('d');
+    });
+
+    it('should try to invoke a model with the appropriate context if getterSetter is true and ngModel is assignable', function() {
+      compileInput(
+        '<input type="text" ng-model="someService.getterSetter" '+
+          'ng-model-options="{ getterSetter: true }" />');
+
+      scope.someService = {
+        value: 'b',
+        getterSetter: function(newValue) {
+          this.value = newValue || this.value;
+          return this.value;
+        }
+      };
+      spyOn(scope.someService, 'getterSetter').andCallThrough();
+      scope.$apply();
+      expect(inputElm.val()).toBe('b');
+      expect(scope.someService.getterSetter).toHaveBeenCalledWith();
+      expect(scope.someService.value).toBe('b');
+
+      changeInputValueTo('a');
+      expect(scope.someService.getterSetter).toHaveBeenCalledWith('a');
+      expect(scope.someService.value).toBe('a');
+
+      scope.someService.value = 'c';
+      scope.$apply();
+      expect(inputElm.val()).toBe('c');
+      expect(scope.someService.getterSetter).toHaveBeenCalledWith();
+      expect(scope.someService.value).toBe('c');
+    });
+
     it('should assign invalid values to the scope if allowInvalid is true', function() {
       compileInput('<input type="text" name="input" ng-model="value" maxlength="1" ' +
                    'ng-model-options="{allowInvalid: true}" />');