5

I want to set up a httpInterceptor to show a common modal dialog when a http request fails. I'm using https://angular-ui.github.io/bootstrap/ for the modal dialog.

I tried 

app.config(function ($httpProvider, $uibModal) { ...

but got the error [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $uibModal

This answer indicates it's only possible to pass providers when configuring, so I then tried

app.config(function ($httpProvider, $uibModalProvider) {

which works up the point where I want to open the modal

var modalInstance = $uibModalProvider.open(

and I get the error that the object doesn't support the proprty or method open. How do I get from the provider to a modal instance or is there another way of achieving this?

Community
  • 1
  • 1
Dave Barker
  • 6,303
  • 2
  • 24
  • 25

2 Answers2

9

Look at following sample:

(function(angular) {
  'use strict';
  var module = angular.module('app', ['ngAnimate', 'ui.bootstrap']);
  
  module.controller('appController', ['$http', '$log', function($http, $log) {
    var vm = this;
    vm.sendRequest = sendRequest;
    
    function sendRequest(){
      $log.info('Try sending a request');
      $http.get('/fake/');
    }

  }]);
  
  module.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
    $scope.ok = function () {
      $uibModalInstance.dismiss('cancel');
    };
  }]);

  module.factory('myHttpInterceptor', ['$log', '$injector', function($log, $injector) {  
    var interceptor = {
      'responseError': function(config) {
        $log.info('Request error');
      
        // injecting $uibModal directly cause Circular Dependency error
        // following method is a fix of it
        $injector.get('$uibModal').open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: 'sm'
        });
        
        return config;
      }
    };
    return interceptor;
  }]);
  
  module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myHttpInterceptor');
  }]);
  
})(window.angular);
body { padding: 20px; }
<!doctype html>
<html lang="en">
<head>
  <title>Interceptor & $uibModal sample</title>
  <meta charset="UTF-8">
  
  <!-- AngularJS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
  
</head>
<body ng-app="app">
  
  <div class="panel panel-default" ng-controller="appController as vm">
    
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">Error!</h3>
        </div>
        <div class="modal-body">
            Hello
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        </div>
    </script>

    <div class="panel-heading">
      Send failing request
    </div>

    <div class="panel-body">
      <button type="button" class="btn btn-primary" ng-click="vm.sendRequest()">Send request</button>
    </div>
    
  </div>
  
</body>
</html>
doroshko
  • 746
  • 5
  • 16
5

Use the $injector service to get an instance of $uibModal.

app.config(function($httpProvider) {

  //To configure an interceptor you have to push a function
  //or name of a registered service into the array. The function
  //or service is where you call $injector.get();
  $httpProvider.interceptors.push(function($injector) {
    return {
      responseError: function(res) {
        var templateUrl = 'http://badurl'; //This can cause infinite recursion!
        if (res.config.url === templateUrl) return null; //One way to prevent infinite recursion.
        var $uibModal = $injector.get('$uibModal');
        var modalInstance = $uibModal.open({
          templateUrl: templateUrl
        });
        return res;
      }
    }
  })

});

But beware of causing an infinite recursion.

JC Ford
  • 6,946
  • 3
  • 25
  • 34
  • That gives me a Error: [$injector:unpr] Unknown provider: $uibModal on the line var $uibModal = $injector.get('$uibModal'); – Dave Barker Mar 11 '16 at 22:43
  • I configure the app using var app = angular.module('app', ['ngAnimate', 'ui.bootstrap']) – Dave Barker Mar 11 '16 at 22:44
  • That means ui-bootstrap is not properly included in your module. – JC Ford Mar 11 '16 at 22:44
  • Is the ui-bootstrap library properly included in your index page? – JC Ford Mar 11 '16 at 22:45
  • Yes and the ui-bootstrap library worked on this page before I tried to centralise the modal logic to the httpInterceptor. – Dave Barker Mar 11 '16 at 22:47
  • Make sure you're calling `$injector.get()` inside the injector function you're building. You don't want it to run at config time, but at run time. – JC Ford Mar 11 '16 at 22:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106059/discussion-between-dave-barker-and-jc). – Dave Barker Mar 11 '16 at 22:49
  • app.config(function ($httpProvider, $injector) { $httpProvider.interceptors.push(function () { return { responseError: function (res) { var $uibModal = $injector.get('$uibModal'); var modalInstance = $uibModal.open( – Dave Barker Mar 11 '16 at 22:52
  • Strangely enough, this works but I'm back to the original problem var $uibModal = $injector.get('$uibModalProvider'); – Dave Barker Mar 11 '16 at 22:56
  • Edited my answer with a more fleshed out example. – JC Ford Mar 11 '16 at 23:51