CODEWITHSUNDEEP
angularjs
Setsuna
Setsuna

Reputation: 2141

How to update directive using data from service?

Assuming I have a service MyService that has a property "data" that contains contents retrieved from 2 or 3 $http requests and stores it into "data". This "data" needs to be accessible or passed to a directive to process, (like a modal).

The service "MyService" contains an attribute "data" necessary for myDirective to process on first load.

// var app = angular.module...
app.service('MyService',...)

I have a separate directive "myDirective":

var myDirective = angular.module('myDirective', []);
myDirective.directive('control', ['Params', function(Params) {...

I tried to inject "MyService" by doing the following:

var myDirective = angular.module('myDirective', ['MyService']);
myDirective.directive('control', ['Params', function(Params) {...

Though it fails to instantiate saying:

error: [$injector:nomod] Module 'MyService' is not available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as the second argument.

How do I properly instantiate my myDirective from myService? Is this the right approach or should I be using some controller/factory/provider?

Upvotes: 0

Views: 123

Answers (2)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

What you are trying is adding MyService service as a module to your MyDirective module which won't work.

The easy way would be to just add the directive to your app module and inject your service:

app.directive('control', ['Params', 'MyService', function(Params, MyService) {
   //...
}]);

If you create extra modules for your directives and and maybe also for your services you will have to add these modules to your app module like for example (usually in app.js):

var directivesModule = angular.module('app.directives', []);
var servicesModule = angular.module('app.services', []);

var app = angular.module('app', ['app.directives', 'app.services']);

And then add your services and directives to the respective modules:

servicesModule.service('MyService',...);

directivesModule.directive('control', ['Params','MyService', function(Params, MyService) {
    //...
}]);

Create one file per service/directive or a file for all services and one for all directives. Depends on the size of your app.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

You are treating myService as a module which it is not, it is a component of a module. You only inject modules into other modules. Once all dependent modules are injected into main module, components of all modules are directly available to other components, regardless of which module they are initially registered to.

To inject into a directive you do it the same way you are injecting Params into directive. I suspect you are needlessly creating a new module just to create a directive.

Try this way:

app.service('MyService',...);
app.directive('control', ['Params','MySerrvice', function(Params,MyService) {...

Now within the directive you have access to objects in service using MyService.propertyName

Upvotes: 1

Related Questions