Angularjs – $uibModal httpProvider拦截器

发布时间：2020-12-17 06:55:48 所属栏目：安全来源：网络整理

导读：我想设置一个httpInterceptor来显示http请求失败时的常见模式对话框.我正在使用 https://angular-ui.github.io/bootstrap/进行模态对话. 我试过了 app.config(function ($httpProvider,$uibModal) { ... 但得到错误[$injector：modulerr]由于以下原因无法实

我想设置一个httpInterceptor来显示http请求失败时的常见模式对话框.我正在使用 https://angular-ui.github.io/bootstrap/进行模态对话.

我试过了

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

但得到错误[$injector：modulerr]由于以下原因无法实例化模块应用程序：
错误：[$injector：unpr]未知提供者：$uibModal

This answer表示配置时只能通过提供商,所以我尝试了

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

这就是我要打开模态的地方

var modalInstance = $uibModalProvider.open(

并且我得到对象不支持proprty或方法打开的错误.如何从提供者到模态实例或是否有其他方法来实现这一目标？

解决方法

请看以下示例：

(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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!