CODEWITHSUNDEEP
angularjshooktypescript1.8
Flavien Volken
Flavien Volken

Reputation: 21339

Angular 1.5.6, $postLink and typescript

I am trying to use $postLink in my directive (using typescript and ng 1.5.6) Unfortunately, I really do not understand where to use this. Should it be a public function named "$postLink" within the body of the directive's class ?

The following is not working:

public $postLink(scope: ng.IScope , element: ng.IAugmentedJQuery, attrs: ng.IAttributes):void {

}

Upvotes: 1

Views: 1104

Answers (2)

Pierre
Pierre

Reputation: 36

This is how I got it to work using typescript (this seed, precisely: https://github.com/b091/ts-skeleton) :

import {directive} from "../../../decorators/directive";

@directive()
export class MyDirective implements ng.IDirective {
    public restrict: string = "A";

    public link: ng.IDirectivePrePost = {
        pre: ($scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void => {
            console.log("pre() being called");
        },
        post: ($scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void => {
            console.log("post() being called");
        }
    }
}

You can see in the typings file for angular, that IDirective can take either:

interface IDirectivePrePost {
    pre?: IDirectiveLinkFn;
    post?: IDirectiveLinkFn;
}

OR

interface IDirectiveLinkFn {
    (
        scope: IScope,
        instanceElement: IAugmentedJQuery,
        instanceAttributes: IAttributes,
        controller: {},
        transclude: ITranscludeFunction
    ): void
}

Upvotes: 2

dballesteros7
dballesteros7

Reputation: 11

It should be something like this in your component's controller:

class MyCtrl {
  static $inject = ['$element'];
  // If you need the element for DOM manipulation,
  // then inject it as $element.
  // $scope can also be injected.
  constructor($element:ng.IAugmentedJQuery) {}

  // $postLink is different from a directive's link and doesn't have
  // arguments.
  public $postLink() {
     // The attrs can't be injected but instead you can define the
     // bindings of the component.
  }
}

Upvotes: 1

Related Questions