Question

我想创建一个模态（对话框）。我已经按照官方bootstrap文档的例子，但我卡住了。当我尝试创建模态时，我收到错误

angular.min.js：122可能未处理的拒绝：{}

mainController：

 angular
.module('app')
.controller('tlmController', function($scope, $http, $timeout, $uibModal,         DTOptionsBuilder, DataLoader, TestLines) {
    $scope.openTestLineDetails = function(id) {
        var modalInstance = $uibModal.open({
            size: 'lg',
            controller: 'testlineDetailsController',
            templateUrl: 'app/client/layout/testlinedetails.tpl.html',
            resolve: {
                testLineId: function() {
                    return id;
                }
            }
        });
    };
 })

和TestlineDetailsController：

angular
.module('app')
.controller('testlineDetailsController', function($scope, $modalInstance, testLineId) {


});

这段代码有什么问题？我在主控制器中使用$ uibModal（$ modal服务不存在）。当我用$ uibModalInstance替换$ modalInstance时我也收到一个错误（service $ uibModalInstance不存在），所以我必须在$ modalInstance中使用$ uibModal。 Strage但是真的。

Answer 1

您可以在app.config中编写以下代码

app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

Answer 2

首先，检查您的模态控制器脚本是否附加到主HTML文件中，如果其附加（显示）在浏览器中（在Chrome中，使用F12键盘按钮打开Web开发人员工具，然后打开“元素”选项卡按钮）（这是因为你正在使用Yeoman团队的generator-angular之类的脚手架工具，记得清除缓存以便从你的代码中获取最新的更新），因为我遇到了同样的问题:(我正在不断审查我的代码出了什么问题然后我发现浏览器没有附加我制作的最新脚本（模态控制器），所以我的代码就像你的代码，但是以你的代码为例：




<!-- In your index.html file, check for this script being appended in your browser -->
<script src="testlineDetailsController.js"></script>

//In your parent controller
angular
.module('app')
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) {
    $scope.openTestLineDetails = function(id) {
        var modalInstance = $uibModal.open({
            size: 'lg',
            controller: 'testlineDetailsController',
            templateUrl: 'app/client/layout/testlinedetails.tpl.html',
            resolve: {
                testLineId: function() {
                    return id;
                }
            }
        });
    };
 })

其次，确保从模态控制器中的模态实例服务实现至少一个方法：编辑：（这是可选的，您可以使用模态中的背景属性隐藏模态选项对象）

//In your modal controller
angular.module('app').
controller('testlineDetailsController', function ($scope, $uibModalInstance, testLineId) {
            //In case you have the ok and cancel buttons in your modal template
            $scope.id = testLineId;
            $scope.ok = function () {
              $uibModalInstance.close();
            };

            $scope.cancel = function () {
              $uibModalInstance.dismiss('cancel');
            };
          
        });

在此之后，您的应用应该正常运行。

现在，有另一个替代来解决此问题，您可以直接在模态选项对象的属性中编写控制器函数：

//In your parent controller
angular
.module('app')
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) {
    $scope.openTestLineDetails = function(id) {
        var modalInstance = $uibModal.open({
            size: 'lg',
            //write an anonymous function instead of naming the controller name.
            controller: function ($scope, $uibModalInstance, testLineId) {
              $scope.id = testLineId;
              $scope.ok = function () {
                $uibModalInstance.close();
              };
              $scope.cancel = function () {
                $uibModalInstance.dismiss('cancel');
              };
            },
            templateUrl: 'app/client/layout/testlinedetails.tpl.html',
            resolve: {
                testLineId: function() {
                    return id;
                }
            }
        });
    };
 })

此替代方案也适用于您的应用。所以我希望这个解释可以帮助您解决问题。

Angular中的模态不起作用。未处理的拒绝{}

2 个答案: