ng-model-options in a template of component makes error in angular 1.6.0

[darius-khll]

I have this following code written in typescript

let app = angular.module('app', []);

app.component('testComponent', {
    controllerAs: 'ctrl',
    controller: class SampleComponent {
        public id: number = 10;
    },
    template: '<div><test-directive ng-model="ctrl.id"></test-directive> {{ctrl.id}} </div>'
});

class TestDirective implements ng.IDirective {

    public terminal = true;
    public scope = false;
    public replace = true;
    public required = 'ngModel';
    public template = `<input type="text" ng-model-options="{ updateOn : 'change' , allowInvalid : true }" />`;

    public constructor() { }
}

app.directive('testDirective', () => new TestDirective());

I'm using this component as well in angular 1.5.9 and doesn't have any problem an issue, but when I updated to angular 1.6.0 it makes error, consider this error

TypeError: Cannot read property 'getOption' of undefined

what's wrong ?

sample link

[gkalpak]

This break because of the following (questionable?) behavior of replace: true:

The directives present on the initial element take precedence over the directives that are present on the template (even of the latter have higher priorities). So, while normally ngModelOptions#link.pre would be executed before ngModel#link.pre, the reverse happens in your example. This pen demonstrates this.

Although ideally this should be fixed for replace: true altogether, I think such a change could break a lot of usecases that are currently relying on the current behavior. Also, it is not exactly clear what the "correct" behavior is. The directives on the original element will inevitably be compiled first, so having different order for compile vs everything else (controller, link.pre, link.post) doesn't sound ideal either.

Given all of that, plus the fact that replace: true has been deprecated (and is discouraged) for a long time now, I don't think it is worth "fixing" it there.

Why did it work before?

Previously, NgModelOptionsController would initialize this.$options inside the controller itself, instead of inside ngModelOptions#link.pre (which is what happens now). As a result, ngModelOptionsController.$options was always initialized inside ngModel#link.pre, even with the aforementioned behavior of replace: true directives.

How can we fix it?

I haven't really thought it through (nor tried it), but moving the $options initialization back into the NgModelOptionsController (possibly inside the $onInit hook) sounds like a reasonable plan. But I may have missed something.

@petebacondarwin, do you happen to remember if there was a specific reason for moving the logic to ngModelOptions#link.pre?