Calling factory service from inside decorator in Angular JS

Question

Using the TextAngular plugin and trying to customize a toolbar, I'm trying to inject my own service (LinkService) into the module but I get an [$injector:unpr] Unknown provider error.

module.config(function($provide, LinkService){
    $provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){
        // $delegate is the taOptions we are decorating
        // register the tool with textAngular
        taRegisterTool('colourRed', {
            iconclass: "fa fa-square red",
            action: function(){
                this.$editor().wrapSelection('forecolor', 'red');
                LinkService.createLink(/*...*/)
            }
        });


        // add the button to the default toolbar definition
        taOptions.toolbar[1].push('colourRed');
        return taOptions;
    }]);
});

How to do I inject my service into this config?

Answer 1

We can not inject services into the configuration block.

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

We can however craft similar logic into a provider. I am unsure of the usage of LinkService, but stubbed out as a provider I can see something like the following...

module.provider('LinkProvider', function () {
    var link;
    return {
        createLink: function (value) {
            link = value;
        },
        $get: function () {
            return {
                link: 'http://' + link
            }
        }
    }
});

module.config(function (LinkProvider) {
    LinkProvider.createLink('stackoverflow.com');
});

See blog Differences Between Providers In AngularJS for a comprehensive write up on providers