Eigi
Eigi

Reputation: 716

AngularJS component - ngModelController with Typescript

I have following (simplified) directive, and I want to write it with Typescript (still not Angular 2.0).

 angular
        .module('app.components')
        .directive('list', List);

    function List() {
        return {
            restrict: 'E',
            templateUrl: 'modules/components/List/List.html',
            controller: ListController,
            controllerAs: 'vm',
            require: ['ngModel', '?^form'],
            bindToController: true,
            link: LinkFunction,
            scope: {
                'id': '@',
                'name': '@'
            }
        };

        function LinkFunction(scope, element, attrs, controllers) {
            var ngModelCtrl = controllers[0];
            var formCtrl = controllers[1];

            ngModelCtrl.$isEmpty = function(value) {
                return !value || value.length === 0;
            };

            ngModelCtrl.$render = function() {
                scope.vm.form = formCtrl;
                scope.vm.model = ngModelCtrl;
                scope.vm.selected = ngModelCtrl.$modelValue;
            };

            // ... more controller functions
    }
})();

Now, how can I inject the controllers into my Typescript Code:

const template = require('./List.html');

export default class ListComponent{
    static selector = 'list';
    static definition: ng.IComponentOptions = {
        template: template,
        controller: ListComponent,
        bindings: {
            'id': '@',
            'name': '@'
        }
    };

    id;
    name;

    constructor(private controllers) {  // <-- not working
        'ngInject';
    }

    $onInit() {
        let ngModelCtrl = this.controllers[0];
        let formCtrl = this.controllers[1];

        ngModelCtrl.$isEmpty = function(value) {
            return !value || value.length === 0;
        };

        ngModelCtrl.$render = function() {
            this.model = ngModelCtrl;
            this.form = formCtrl;
            this.selected = ngModelCtrl.$modelValue;
        };
    }
}

Hope someone knows the answer or can give me a hint how to achieve my goal, because I searched the web for hours, but didn't find any solution for this.

Upvotes: 1

Views: 1158

Answers (1)

Aleksey L.
Aleksey L.

Reputation: 37948

Use "require" like explained here https://docs.angularjs.org/guide/component See Intercomponent Communication

Upvotes: 1

Related Questions