AngularJS: Injecting $timeout not available in directive

Question

I am injecting $timeout into the following directive but it is not defined.

The following code prints undefined to the console and throws TypeError: $timeout is not a function;

export default class foo {
    constructor ($timeout) {
        'ngInject';
        this.restrict = 'A';
        this.scope = {};
        this.$timeout = $timeout;

        console.log( $timeout );
        $timeout( function() {
            alert('timeout');
        }, 0 );
    }

    link($scope, $element, $attrs, $ctrl ) {      
        ....
    }

    // Create an instance so that we can access this inside link
    static factory() {
        foo.instance = new foo();
        return foo.instance;
    }
}

Matthew Cawley · Answer 1 · 2017-02-12T14:06:59.313

I think the problem is that you're not injecting anything, you're merely specifying a parameter $timeout which is acting as like a placeholder for a would-be injected service. To fix, add foo.$inject = ['$timeout']; to the end of your file as follows:

export default class foo {
    constructor ($timeout) {
        'ngInject';
        this.restrict = 'A';
        this.scope = {};
        this.$timeout = $timeout;

        console.log( $timeout );
        $timeout( function() {
            alert('timeout');
        }, 0 );
    }

    link($scope, $element, $attrs, $ctrl) {      

    }

    // Create an instance so that we can access this inside link
    static factory() {
        foo.instance = new foo();
        return foo.instance;
    }
}

foo.$inject = ['$timeout'];

There are several examples here on the sitepoint site which also go on to do the injection separately from the class defintions.

Or to go through the static factory (as you probably intended), it will be foo.factory.$inject = ['$timeout'] at the end of the file, and you'll also have to tweak your factory function to take and pass on the injected service for you:

export default class foo {
    constructor ($timeout) {
        'ngInject';
        this.restrict = 'A';
        this.scope = {};
        this.$timeout = $timeout;

        console.log( $timeout );
        $timeout( function() {
            alert('timeout');
        }, 0 );
    }

    link($scope, $element, $attrs, $ctrl ) {      

    }

    // Create an instance so that we can access this inside link
    static factory($timeout) {
        foo.instance = new foo($timeout);
        return foo.instance;
    }
}

foo.factory.$inject = ['$timeout'];

AngularJS: Injecting $timeout not available in directive

1 Answers1