Question

我正在使用bootstrap模态指令。我需要在ajax错误方法上打开模态弹出窗口，弹出窗口显示正常。但在按钮上单击模态，我需要解除模态，我收到错误

$uibModalInstance is not defined

首先在模块上，我已正确注册

var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);

然后在角度控制器上，我正确地注入了这个指令。

var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)

然后我通过跟随同一个控制器内的代码来调用这个模态

var onError = function (reason) {
        $scope.modalOptions.headerText = "Error";
        $scope.modalOptions.bodyText = reason.statusText;

        $uibModal.open({
            templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
            controller: 'loginController',
            scope: $scope
        });
    };

    $scope.cancelForm = function () {
        $uibModalInstance.dismiss();
    };

现在你可以看到我为modal创建了单独的html文件，下面是html

<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
 <input type="button" class="btn btn-default" value="Close"
            ng-click="cancelForm()" />
</div>

现在，当我点击关闭按钮时，我收到错误

ReferenceError: $uibModalInstance is not defined
    at Scope.$scope.cancelForm (loginController.js:44)

现在我已经解决了同样问题的一些不同解决方案例如：http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview

但在这种情况下，上面的例子是使用两个不同的控制器，但在我的情况下，我使用相同的控制器，如果我同时注入$uibModal以及$uibModalInstance，那么它无法正常工作

Answer 1

是uibModalInstance将是未定义的。您需要存储您的uibmodel的引用并在该引用上调用close。像这样：

var myModel = $uibModal.open({
        templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
        controller: 'loginController',
        scope: $scope
    });

并且关闭功能：

 $scope.cancelForm = function () {
    myModel.close();
};

Answer 2

您需要在Controller中注入$ uibModalInstance，如下所示

var loginController = function ($scope, $window, $routeParams, $uibModal, DataService,$uibModalInstance)

Answer 3

在您打开模态的Controller中，您需要注入依赖项$ uibModal。要打开模态，您需要为模态指定html模板，控制器。

       angular.module('yourApp')
            .controller('popupErrorMsgController', popupErrorMsgController);.
    popupErrorMsgController.$inject = ['$scope', '$uibModalInstance', 'modalInstanceData'];
        function popupErrorMsgController($scope, $uibModalInstance, modalInstanceData) {

$scope.modalInstanceData = modalInstanceData;
$scope.cancelForm = function(){
var objectToSend = {};
$uibModalInstance.close(objectToSend);
}
    }

现在，在你的模态控制器-popupErrorMsgController中，你可以通过注入$ uibModalInstance来访问模态实例。您还可以在模态控制器中注入要解析的其他参数

<h3>{{modalInstanceData.headerText}}</h3>

在模态控制器中，您可以将接收到的参数分配给模态的$ scope，并在模态HTML模板中访问它。

{{1}}

希望这适合你！

$ uibModalInstance未定义

3 个答案: