3

I am trying to create some Directives in Typescript using the pattern below. The problem is the block returned by 'compile' does not seem to get called. The class is definitely getting created and if I step through, I can see the compile function seems to get picked up when it's instantiated, but the code inside compile never runs.

I tried stripping down compile to a very simple call (i.e. compile (): any => { console.log('works') } and a few similar variations), but can't get any code in there to execute.

Any ideas?

export class myDirective implements ng.IDirective {

    public restrict: string = 'AE';

    constructor() {
        console.log('my-directive ctor'); // this message IS logged
    }

    public compile = (element: JQuery, attrs: ng.IAttributes, transclude: any): ng.IDirectivePrePost => {
        element.addClass('my-directive-class');
        console.log('in compile');  // this message IS NOT logged
        return {
            pre: ($scope: any, element: JQuery, attrs: ng.IAttributes) => {
                console.log('in compile pre');  // this message IS NOT logged
            },
            post: ($scope: any, element: JQuery, attrs: ng.IAttributes) => {
                console.log('in compile post'); // this message IS NOT logged
            }
        };
    }

    public static factory(): ng.IDirectiveFactory {

        var directive = () => {
            return new myDirective();
        };

        return directive;
    }

}

Update I did not originally include the code where I registered the directive with Angular, which looked like this:

angular.module('myModule').directive('myDirective', myDirective.factory);

Thanks to the hint from @Gustav, I realized the factory method registered with the Directive was returning a function. I needed to return the result of the factory function, so simply adding the parens to the call to the factory method did the trick:

angular.module('myModule').directive('myDirective', myDirective.factory());
6
  • don't you need to execute the directive- function you're returning in the factory()-function? Commented Dec 3, 2015 at 14:40
  • otherwise I'd recommend writing directives according to my answer here, using function instead of class. Commented Dec 3, 2015 at 14:44
  • Maybe I'm not following, here's the rest of the code that was implied: angular.module('myModule').directive('myDirective', myDirective.factory); Not sure how making it a function would change anything, doesn't it transpile to that anyway? Then the html file has <my-directive> which is what I thought "executes" the directive code. I'm pretty new to Angular, so maybe I'm missing something? Commented Dec 4, 2015 at 6:23
  • well, the return of the factory function should be an object, a directive object. But currently your factory-function returns a function. I'm not sure it would work, But if you tried doing return directive() or just: return new myDirective() in the factory function, I think it might work. But again, I would suggest writing direcitves according to the structure of the link I posted before Commented Dec 4, 2015 at 9:36
  • so, writing it as a function did work, but you gave me the hint to figure out why it wasn't working as a class. Turns out, it was the registration of the directive's factory with angular (which I omitted originally). The static factory method needs to be called with parens: angular.module('myModule').directive('myDirective', myDirective.factory()) Doh! Thanks! Commented Dec 4, 2015 at 13:46

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.