未捕获的错误：[$injector:cdep] 在工厂中使用 ngdialog答案

【问题标题】：Uncaught Error: [$injector:cdep] use ngdialog in factory未捕获的错误：[$injector:cdep] 在工厂中使用 ngdialog
【发布时间】：2015-12-10 06:09:27
【问题描述】：

我想使用 ngdialog 来处理 401 状态，但我得到错误：Uncaught Error: [$injector:cdep]

angular.module('ws.site.master', [
      'ngResource',
      'ngCookies',
      'ngSanitize',
      'ngAnimate',
      'ui.router',
      'ngDialog'
    ]);

这里我添加一个工厂来处理 401 状态。

angular.module('ws.site.master').factory('authHttpResponseInterceptor',['$q','$location','ngDialog',function($q,$location,ngDialog){
  return {
    response: function(response){
      if (response.status === 401) {
        console.log("Response 401");
      }
      return response || $q.when(response);
    },
    responseError: function(rejection) {
      if (rejection.status === 401) {
        console.log("Response Error 401",rejection);
        ngDialog.open({
          template: '/common/templates/at.modal.security.html',
          className: 'ngdialog-theme-default modal-security',
          closeByDocument: false,
          closeByEscape: false,
          trapFocus: false,
          controller: ['$scope', function($scope) {
            $scope.defaultView = defaultView || 'login';
          }]
        });
        $rootScope.isSecurityModal = true;
      }
      return $q.reject(rejection);
    }
  }
}]);

这里将 authHttpResponseInterceptor 添加到 $httpProvider

angular.module('ws.site.master').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', 'ROUTE',
  function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider, ROUTE) {
    $locationProvider.html5Mode(true);
    angular.forEach(ROUTE, function(_route, _name){
      $stateProvider.state(_name, _route);
    });
    $urlRouterProvider.otherwise('/');
    $httpProvider.interceptors.push('authHttpResponseInterceptor');
  }
]);

【问题讨论】：

标签： angularjs http-status-code-401 ng-dialog

【解决方案1】：

错误：$injector:cdep - 循环依赖

请查看有关this的角度文档

angular.module('myApp', [])
.factory('myService', function (myService) {
  // ...
})
.controller('MyCtrl', function ($scope, myService) {
  // ...
});

您将“ngDialog”两次注入主模块，然后注入工厂，所有这些都在同一个“ws.site.master”中

【讨论】：

我试图删除 angular.module 中的 ngdialog，但仍然出错。如果我删除所有的ngdialog，就可以了。但我需要使用它:(
是啊~我找到了解决办法~~~~~在rootScope中写一个方法使用ngdialog，在authHttpResponseInterceptor中使用~~~~HOHOHO

【解决方案2】：

对于对话框窗口，您必须在 html 标头中包含 bootstrap-tpls。该应用程序应如下所示：

angular.module('myModule', [ 'ui.bootstrap']);

在控制器或工厂有：

app.controller('myController', function($scope, $modal) {
...
$scope.openPopup = function() {
                    $scope.modalInstance = $modal
                            .open({
                                animation : true,
                                backdrop : 'static',
                                templateUrl : 'yourTemplatePath/template.html',
                                controller : 'yourPopupController'
                            });

                    $scope.modalInstance.result.then(function(returnResult) {
                        $scope.returnResult = returnResult;
                    });
                };

【讨论】：

OP 询问的是 ngDialog / http 拦截器绑定，而不是 ui.bootstrap 的对话框。