Trigger $modal.open from app.js

Question

My app.js looks something like this. I need to handle the AJAX errors globally. This code works fine if I were to use only console.log. However, I need to trigger a modal dialog by using $modal, but not sure how to implement that.
Any help is appreciated. Thank you!

define(['jquery','angularAMD', 'modernizr' ,'angular-ui-router'], function ($, angularAMD) {
var app = angular.module('ABC', ['ui.router','angular.css.injector']),
ngAMD = angularAMD(app);
app.run(function($rootScope){
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from) {
    $rootScope.previousState = from.name;
    $rootScope.currentState = to.name;
  });
});

app.config(function($stateProvider, $urlRouterProvider, $provide, $httpProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('first',
      ngAMD.route({
        url:'/first',
        templateUrl: 'app/partials/first.html',
        controller : 'firstCrtl'
      })
  )
.state('default',
          ngAMD.route({
            url:'/',
            templateUrl: 'app/partials/default.html',
            controller : 'defaultCrtl'
      })
 );

$provide.factory('globalAjaxInterceptor', function($q) {

  return {

    // On request success
    request: function(config) {
      return config || $q.when(config);
    },

    // On request failure
    requestError: function(rejection) {
      return $q.reject(rejection);
    },

    // On response success
    response: function(response) {
      if(response.data.status === "FAILURE" && response.data.failueCode === "F003") {
          console.log('Trigger Modal');
      }else if(response.data.status == "SUCCESS"){
          console.log('Response Address Successs');

      }

      // Return the response or promise.
      return response || $q.when(response);

   },

    // On response failture
    responseError: function(rejection) {
      // Return the promise rejection.
        switch (rejection.status) {
          case 404:
              console.log('Destinaion not found!')
            break;
          default:
            console.log('Trigger Modal');
        }
        return $q.reject(rejection);
    }
  };
});

// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('globalAjaxInterceptor');
  });
  ngAMD.bootstrap();
  return app;
});

From the `globalAjaxInterceptor` service you *do have* access to the `$modal` service, just like the `$q` service. So use `$modal.open()` as normal. — Nikos Paraskevopoulos, Feb 16 '15 at 15:52
@NikosParaskevopoulos - I get a cdep (Circular Dependency) when I do that. perhaps thats because $modal would fetch its template using another AJAX call. Not sure how to go about this. — Swanidhi, Feb 16 '15 at 15:55
@NikosParaskevopoulos - Error: [$injector:cdep] Circular dependency found: $http <- $modal <- globalAjaxInterceptor <- $http <- $compile — Swanidhi, Feb 16 '15 at 16:03

score 0 · Accepted Answer · answered Feb 18 '15 at 13:44

The solution to his problem was a solution to fixing the Circular dependency error or Cdep. The fix was to explicitly inject $modal using $injector. Solution looks like the one below -

responseError: function(rejection) {
      // Return the promise rejection.
      switch (rejection.status) {
        case 404:
          console.log('Destinaion not found!')
          break;
        default:
          $injector.invoke(function($modal) {
            $rootScope.errorOverlay($modal);
          });
      }
      return $q.reject(rejection);
    }

Trigger $modal.open from app.js

1 Answers1