How to access ngModelController in Angular1.5 components?

Question

When I use angular.component() to create the brand new component that angular 1.5 provides, there's no link function, so the old way of injecting ngModelController or any other controllers doesn't work.

require: 'ngModel', link: function(scope, element, attrs, ctrls)

The above code is for a directive to access ngModelController. How do we access it in the component now?

Answer 1

Instead of getting a ctrls array, you get them now by name, just like bindings use to:

class MyComponentController implements ng.IComponentController {

    public modelCtrl: ng.INgModelController;
    ...
    ...
    // use modelCtrl here
    // instead of ctrls[0]
    ...
    ...
}

const MyComponent: ng.IComponentOptions = {
    template: '...',
    bindings: {...},
    require: {modelCtrl: 'ngModel'},
    controller: MyComponentController
}

angular.module('myModule').component('MyComponent', MyComponent);

Or, if you prefer plain JS:

function MyComponentController() {
    ...
    ...
    // use this.modelCtrl here
    ...
    ...
}

var MyComponent = {
    template: '...',
    bindings: {...},
    require: { modelCtrl: 'ngModel' },
    controller: MyComponentController
};

angular.module('myModule').component('MyComponent', MyComponent);