AngularJS 组件 - 带有 Typescript 的 ngModelController答案

【问题标题】：AngularJS component - ngModelController with TypescriptAngularJS 组件 - 带有 Typescript 的 ngModelController
【发布时间】：2016-10-05 15:40:34
【问题描述】：

我有以下（简化的）指令，我想用 Typescript 编写它（仍然不是 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
    }
})();

现在，如何将控制器注入到我的 Typescript 代码中：

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;
        };
    }
}

希望有人知道答案或者可以给我一个提示如何实现我的目标，因为我在网上搜索了几个小时，但没有找到任何解决方案。

【问题讨论】：

感谢您的回复，但我知道如何使用 typescript 编写 angularjs（Todd Motto Styleguide），但我不知道如何将 ngModelController 注入到我的组件中（就像在旧的 angularjs 代码中一样）跨度>
您是否设法注入所需的控制器？

标签： javascript angularjs typescript components directive

【解决方案1】：

使用“require”，就像这里解释的https://docs.angularjs.org/guide/component 请参阅组件间通信

【讨论】：