Angular-ui-bootstrap在最小化时会导致未知的提供商错误

Question

添加angular-ui-bootstrap并在我的yeoman应用程序上运行grunt服务后，它运行完美，我想要显示的模式被正确显示，但是一旦我做了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');
  };
};
};

Answer 1

可能你需要注入你的控制器依赖…

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

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

Answer 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) {

Answer 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;
};

Answer 4

我只是在整个应用程序中使用的许多模态中的一个上遇到了这个问题，结果证明我的问题是在模态配置的resolve块中没有使用显式函数注释。

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();
    }]
  }
});

希望这能帮别人省下一两根白发…