angular-ui-bootstrap 缩小时会导致未知的提供程序错误答案

【问题标题】：angular-ui-bootstrap causes unknown provider error when minifiedangular-ui-bootstrap 缩小时会导致未知的提供程序错误
【发布时间】：2014-05-08 22:55:30
【问题描述】：

在我的 yeoman 应用程序上添加 angular-ui-bootstrap 并运行 grunt serve 后，它运行完美，并且我想要显示的模式正确显示，但是一旦我执行 grunt 构建，我的控制台中就会出现未知提供程序错误.

<!-- This is what I added in my index.html -->
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

// In app.js I have 
angular.module('yeomanApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap'
])

在控制器中，

.controller('myCntrl', function ($modal) {

$scope.items = ['item1', 'item2', 'item3'];

$scope.showDeleteWarning = function () {
    var modalInstance = $modal.open({
        templateUrl: 'deleteWarning.html',
        controller: ModalInstanceCtrl,
        resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {});
  };

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
    deleteVent();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

};

【问题讨论】：

标签： build gruntjs yeoman angular-ui-bootstrap

【解决方案1】：

您可能需要注入控制器依赖项...

https://docs.angularjs.org/tutorial/step_05#a-note-on-minfication

.controller('myCntrl', ['$modal', function ($modal) {
    /* Controller Code Here... */
}]);

【讨论】：

我试过了，发现错误：[$injector:cdep] 找到循环依赖：在我的控制台上。

【解决方案2】：

我知道这是一个老问题，但我会在这里为将来遇到此问题的人发布我的答案。

我之前遇到过这个确切的问题。缩小期间错误的原因很可能是您的“var ModalInstanceCtrl”。

我的代码是这样工作的：

var modalInstance = $modal.open({
    templateUrl: 'deleteWarning.html',
    controller: 'ModalInstanceCtrl', //change this to a string
    resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

还有这一行：

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

到：

angular.module('myModule').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

【讨论】：

【解决方案3】：

对于刚遇到此问题的任何人，也许这会有所帮助。我们使用 customModalDefaults 和 customModalOptions，所以我们不得不把 show 函数中的整个 return $modal.open(tempModalDefaults).result; 变成如下：

this.show = function (customModalDefaults, customModalOptions) {
    //Create temp objects to work with since we're in a singleton service
    var tempModalDefaults = {};
    var tempModalOptions = {};

    //Map angular-ui modal custom defaults to modal defaults defined in service
    angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

    //Map modal.html $scope custom properties to defaults defined in service
    angular.extend(tempModalOptions, modalOptions, customModalOptions);

    return $modal.open({
        backdrop: customModalDefaults.backdrop,
        keyboard: customModalDefaults.keyboard,
        modalFade: customModalDefaults.modalFade,
        templateUrl: customModalDefaults.templateUrl,
        size: customModalDefaults.size,
        controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
            $scope.modalOptions = tempModalOptions;
            $scope.modalOptions.ok = function (result) {
                $modalInstance.close(result);
            };
            $scope.modalOptions.close = function (result) {
                $modalInstance.dismiss('cancel');
            };
        } ]
    }).result;
};

【讨论】：

【解决方案4】：

我只是在整个应用程序中使用的众多模态中的一个上遇到了这个问题，结果发现我的问题不是在模态配置的解析块中使用explicit function annotation。

var modalInstance = $uibModal.open({
  templateUrl: 'preferences.html',
  controller: 'preferencesCtrl as ctrl', // this external controller was using explicit function annotation...
  resolve: {
    parent: [function() { 
      return ctrl;
    }],
    sectorList: ['preferencesService', function(preferencesService) { // but this was not!
      return preferencesService.getSectors();
    }]
  }
});

希望这可以节省别人一两根白发……

【讨论】：