CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-uiangular-ui-bootstrap
Dr.Knowitall
Dr.Knowitall

Reputation: 10488

Using a service within a service Angularjs

I'm trying to inject a bootstrap-ui $modal service into my factory, but when I do I get a circular dependency issue and when I don't $modal is not defined. The code looks like:

retryModule = angular.module('g4plus.retry-call', ['ui.bootstrap'])

retryModule.factory 'RetryCall', ($q, $rootScope)->
  requests = {}
  failedRequests = {}
  uniqueId = 0
  modalInstance = undefined
  modalClose = true

### Some more code

    alertUser = ()->
    modalInstance = $modal.open
      template: """
        <div class="modal-dialog">
          ... Some more code ...

How can I use $modal within my factory? Please don't ask me to put this code in a directive, because that defeats the purpose. If I could have put this in a directive I would have had this project done already. The same goes for controllers.

Thanks!

If I inject $modal into my factory the circular dependency error is:

Uncaught Error: [$injector:cdep] Circular dependency found: $modal <- RetryCall <- $http <- $compile

Upvotes: 0

Views: 2759

Answers (2)

user2943490
user2943490

Reputation: 6940

The accepted answer doesn't provide a working solution.

The problem here is that $modal depends on $http. $modal cannot ask for $http in the interceptor because $http does not yet exist (since you are still in the config phase, configuring the $httpProvider).

This answer by user thaumant explains how to work around this, here:

I need two instances of AngularJS $http service or what?

Upvotes: 5

rtcherry
rtcherry

Reputation: 4880

Original comment: I do not see anything in the code you posted that requires $modal... I think the circular dependency is because $modal requires $http and you are trying to set up an interceptor. Can you please post more code? How are you setting up your $http interceptor? What is the full definition of RetryCall and where are you requiring $modal?

Possible Answer: Create your interceptor as a normal AngularJS service (call it something like yourHttpInterceptor, and then add it by using

yourAngularModule.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('yourHttpInterceptor');
}]);

Alternatively, you can create an anonymous factory

yourAngularModule.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push(['$modal', function($modal) {
        return {
            request: function(config) {
                 // Do something...
            },
            ...
        }
    }]));
}]);

Upvotes: 2

Related Questions