Angular 1.5 + TypeScript Directive with Controller

Question

I'm trying to create a directive with controller using Angular 1.5 and TypeScript 1.8 but it won't work for me. I looked at a bunch of examples but I am following those examples to the tee and it still won't work for me. Am I cursed?

Here is the code:

export class FooController implements angular.IController {
    static $inject = ['myService', '$state'];

    constructor(private myService: Services.MyService, private $state: angular.ui.IStateService) {
    }

    public foo: Services.Dtos.Foo;
    public bar;

    $onInit() {
        if (!this.foo) return;

        this.bar = this.$state.href('app.bar', {id: this.foo.id});
    }
}

export class FooDirective implements angular.IDirective {
    public restrict = 'E';
    public replace = true;
    public scope = {};
    public templateUrl = 'content/templates/foo.template.html';
    public controller = FooController;
    public controllerAs = 'ctrl';
    public bindToController = {
        foo: '<',
    };
}

It errors on FooDirective saying the following:

Class 'FooDirective' incorrectly implements interface 'IDirective'.
Types of property 'bindToController' are incompatible.
Type '{ foo: string; }' is not assignable to type 'boolean | { [boundProperty: string]: string; }'.
Type '{ foo: string; }' is not assignable to type '{ [boundProperty: string]: string; }'.
Index signature is missing in type '{ foo: string; }'.

What am I doing wrong?

UPDATE 2017/02/15 IDirective looks like this (from angular.d.ts file):

interface IDirective {
    compile?: IDirectiveCompileFn;
    controller?: string | Injectable<IControllerConstructor>;
    controllerAs?: string;
    /**
     * @deprecated
     * Deprecation warning: although bindings for non-ES6 class controllers are currently bound to this before
     * the controller constructor is called, this use is now deprecated. Please place initialization code that
     * relies upon bindings inside a $onInit method on the controller, instead.
     */
    bindToController?: boolean | {[boundProperty: string]: string};
    link?: IDirectiveLinkFn | IDirectivePrePost;
    multiElement?: boolean;
    priority?: number;
    /**
     * @deprecated
     */
    replace?: boolean;
    require?: string | string[] | {[controller: string]: string};
    restrict?: string;
    scope?: boolean | {[boundProperty: string]: string};
    template?: string | ((tElement: JQuery, tAttrs: IAttributes) => string);
    templateNamespace?: string;
    templateUrl?: string | ((tElement: JQuery, tAttrs: IAttributes) => string);
    terminal?: boolean;
    transclude?: boolean | 'element' | {[slot: string]: string};
}

I copy pasted your code to an Angular project and didn't get an error. What typings for IDirective do you use? Please add them to your question. — Sebastian Sebald
– Sebastian Sebald, Commented Feb 15, 2017 at 7:47
@Sabastin, I added the typings. This is very puzzling to me. I'm not sure why it doesn't work. — Mohamed Nuur
– Mohamed Nuur, Commented Feb 15, 2017 at 18:34
According to this: stackoverflow.com/questions/22077023/… the solution is to explicitly cast scope and bindToController to {[boundProperty:string]:string} and the error goes away. — Mohamed Nuur
– Mohamed Nuur, Commented Feb 15, 2017 at 18:55

larlon · Accepted Answer · 2017-02-15 08:05:08Z

1

The directive should be a function that returns a configuration object. I would write the directive like this:

export const fooDirective = (): angular.IDirective => {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'content/templates/foo.template.html',
        controller: FooController,
        controllerAs: 'ctrl',
        bindToController: {
            foo: '<'
        }
    };
};

I would also recommend you take a look at the new component API. It greatly simplifies creating new components, and it uses many best practices by default, such as controllerAs.

https://docs.angularjs.org/guide/directive
https://docs.angularjs.org/guide/component

answered Feb 15, 2017 at 8:05

larlon

5871 gold badge6 silver badges17 bronze badges

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

1 Comment

Mohamed Nuur Over a year ago

This answer doesn't help at all. The problem is TypeScript is complaining about my bindToController not being right. I'm not sure what's going on.

Vlada · Accepted Answer · 2017-02-17 13:07:14Z

0

It seems to be the problem with TypeScript definition only accepting boolean.

export class FooDirective implements angular.IDirective {
  public restrict = 'E';
  public replace = true;
  public scope = {};
  public templateUrl = 'content/templates/foo.template.html';
  public controller = FooController;
  public controllerAs = 'ctrl';
  public bindToController:any = {
      foo: '<',
  };
}

This would fix the error, on the other hand it won't typecheck bindToController.

answered Feb 17, 2017 at 13:07

Vlada

2584 silver badges8 bronze badges

2 Comments

Aluan Haddad Over a year ago

You don't need to write the word public seven (7) times, it has no impact on your code except where it reduces readability.

Eduard Jacko Over a year ago

@AluanHaddad that depend on tslint settings.

Collectives™ on Stack Overflow

Angular 1.5 + TypeScript Directive with Controller

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related