AngularJS component - ngModelController with Typescript

Question

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.

thx for your reply, but I know how to write angularjs with typescript (Todd Motto Styleguide), but I dont know, how to inject ngModelController into my component (like in the old angularjs code) — Eigi
– Eigi, Commented Jun 6, 2016 at 6:19

Aleksey L. · Accepted Answer · 2016-06-06 06:23:28Z

1

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

answered Jun 6, 2016 at 6:23

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS component - ngModelController with Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related