gpt4 book ai didi

Angularjs - $uibModal httpProvider 拦截器

转载 作者:行者123 更新时间:2023-12-04 16:43:04 33 4
gpt4 key购买 nike

我想设置一个 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(

我得到对象不支持打开的属性或方法的错误。我如何从提供者到模态实例,或者是否有另一种方法来实现这一点?

最佳答案

请看以下示例:

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

关于Angularjs - $uibModal httpProvider 拦截器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35951049/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com