Reputation: 716
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
Reputation: 37948
Use "require" like explained here https://docs.angularjs.org/guide/component See Intercomponent Communication
Upvotes: 1