WIP: Feat: watch ngModel with object equality via ngModelOptions

[Narretz]

This is a first draft for watching models with object equality.
Use cases:

• models are collections (ngList / multiple) (also the next step after this)
• models are objects, and only part of objects change

Notes:

• we cannot use watch with third param set to true / watchCollection due to the way the model watch currently works. Basically, all actions happen inside the watch fn, not the action fn. The added test shows why.
• the current implementation copies the model if the deepWatch is true, so scope model is never === $modelValue; and so changes can be detected with equals(). I'm not sure if this is the most performant way, or actually the same as having a watch with objectEquality = true. (Note: There are some PRs for making copy faster)

For ngList / (select, url, email) multiple to use deepWatch, I can think of two ways:

• Let it set $$options.deepWatch inside the modelController to true, before the options are evaluated inside ngModelOptions. However, (even with feat(ngModelOptions): allow options to be inherited from ancestors #10922,) we would need to extend the options (once more), so that what is preset on the ctrl gets merged with the actual ngModelOptions
• Set a special property on the controller, such as $isCollection, that tells the controller to use deepWatch. This could still be overruled if deepWatch is explicitly set to false. This is however not very obvious for people who have their own controls. ngModelOptions would centralize everything.

[gkalpak]

Using get in the name is kind of confusing, since it's not returning anything.

[petebacondarwin]

I would like to get away from doing so much work in the watcher function.

How about we move processing of ng-change into the post digest or even $evalAsync?

If we could move everything out then we could solve this problem by letting the input directive decide what watching mechanism to use (i.e. simple watch, deep watch or watch collection).

I think to begin with the input directive ought to be responsible for making the decision about the type of model. But then in my POC, I allowed parsers and formatters to convert the model that was being passed through from simple to collection and back again by setting a flag.

[Narretz]

Putting the burden on ngChange would be great. I'm just a tiny bit worrying about BC, which I wanted to avoid at this point.

Who decides what kind of watching ngModel uses is imo separated from the fact thatit has to be implemented in ngModel anyway.

[petebacondarwin]

<form>
  <input type="text" ng-model="myArray" to-upper ng-model-options="{ deepWatch: true }">

  <select ng-model="selectedOptions" ng-options="getOptions()" multiple>


  <input type="text" ng-model="obj" converter /> 


  <input ng-model="myObj.moo">
          <!-- myObj.moo = $modelValue -->
  <input ng-model="myObj.moo" ng-model-options="{ getterSetter: true }">
          <!-- myObj.moo($modelValue) -->

  <input ng-model="myObj" address-directive ng-model-options="{ deepWatch: false }">
  <input ng-model="myObj" address-directive ng-model-options="{ deepWatch: true }">
</form>

myObj = {
  street: '',
  town: '',
  postalCode: ''
};


myArray = ['a', 'b', 'c'];


function $parser(value) {
  return value.toUppercase();
}



parser(value: Input) => Output
formatter(value: Output) => Input

modelValue : Output
viewValue : Input

$watcher(value : Output)

$parsers.push(parserObj)

parserObj.$$modelType = NgModelTypes.OBJECT;
parserObj.$$viewType = NgModelTypes.SIMPLE;


//inside a directive
modelCtrl.$setWatchType({deepWatch: true});

$setViewValue(array)


MODEL <-> PARSER/FORMATTER <-> PARSER/FORMATTER <-> VIEW (directive)
OBJECT    OBJECT - STRING      STRING  - DATE       DATE
ngModel.$isEmpty
ngModel.$viewType = OBJECT
ngModel.$deepWatch

ngModel.$updateWatcher()


<emailInput ng-multiple="isMultiple">

[dcherman]

An even better idea may be to allow customization of the function used to test equality rather than setting it to deep: true/false.

Consider a moment object (http://momentjs.com/). I would never want to deep watch this for equality since it's needlessly expensive, I would end up writing an equality test that would use moment.isSame(other)

[petebacondarwin]

@dcherman - I hear what you are saying. I wonder if this could be approached by allowing angular.equals, which is what is used by $watch and friends to check for deep equality, to use some $$equals() method on the object if it is available. I don't know if this has been discussed before ( @IgorMinar ?) but it is a concept that is used frequently in other languages.

There is an additional issue, though, which is that when we are not using === to test for equality we must make a clone of the object that is being watched so that we can actually tell if its internal value has changed. So there would still be this additional cost.

Another thing to consider, is that in ngRepeat we can avoid deep equality checks by providing a track by expression.