Question

在我的yeoman应用程序上添加angular-ui-bootstrap并运行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

我刚刚在我的应用程序中使用的许多模态中遇到了这个问题，结果发现我的问题是在模态配置的解析块中没有使用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();
    }]
  }
});

希望这可以为其他人留下一两件白发......

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

4 个答案: