Question

这里我有一个bootstrap popup.It工作正常。当我们点击ok按钮时它会关闭弹出窗口。但我想在特殊条件下关闭弹出窗口。

当满足以下条件时，我想关闭已打开的弹出窗口。

if(x==y){
    $uibModalInstance.close();
}

但它没有关闭弹出窗口。我在控制台上收到以下错误。

ReferenceError：$ uibModalInstance未定义

JSP： -

<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">{{ctrl.modalHeader}}</h3>
        </div>
        <div class="modal-body" id="modal-body">
            {{ctrl.modalBody}}

        <ul ng-repeat="item in ctrl.list">
        <li ng-repeat="(key,value) in item">{{value}}</li>
        </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ctrl.ok()">OK</button>
            <!--<button class="btn btn-warning" type="button" ng-click="ctrl.cancel()"><spring:message code="label.close"/></button>-->
        </div>
    </script>

JSP依赖关系是： -

<script src="js/commons/ui-bootstrap-tpls-2.4.0.js"></script>

角度控制器： -

var app = angular.module('App', ['ui.bootstrap']);

app.controller('facilitoController', function($scope,  $window, $filter, $uibModal) { 

if(x==y){
//Here I am failing to close the popup
    $uibModalInstance.close();
}

$scope.open = function() {
        var modalInstance = $uibModal.open({
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            templateUrl: 'myModalContent.html',
            controller: function($uibModalInstance) {

                var self = this;
                self.modalHeader = modalHeader;
                self.modalBody = modalBody;
                self.list = exceptions;

                self.ok = function() {
                    $uibModalInstance.close();
                };

                self.cancel = function() {
                    $uibModalInstance.dismiss('cancel');
                };
            },
            controllerAs: 'ctrl'
        });
    }

};

Answer 1

你试图在它打开之前关闭弹出窗口，这样当你调用这个open方法时会出现这个错误吗？

Answer 2

使用模态实例进行关闭模型

if(x==y){
    $scope.modalInstance.close();
}

$scope.open = function() {
    $scope.modalInstance = $uibModal.open({....

Answer 3

您已将$uibModalInstance注入模态控制器，但尚未对facilitoController执行此操作。您必须将其注入才能访问它：app.controller('facilitoController', function($scope, $window, $filter, $uibModal, $uibModalInstance) { ... });

更新：我的第一个假设是不正确的，因为$uibModalInstance是本地的，而不是正常的注射剂。所以你可以简单地将它注入facilitoController。当open方法返回一个模态实例时，您可以将其分配给局部变量，然后在需要时手动将其关闭。请注意：在初始化实例并在$scope.open方法中打开弹出窗口之前，您无法关闭它。

看看工作示例，如果弹出窗口在之前打开，它会在控制器初始化后的5秒内关闭弹出窗口：

angular.module('App', ['ui.bootstrap'])
.controller('facilitoController', function($scope, $window, $filter, $uibModal, $timeout) { 
  var modalHeader = "Test modalHeader", modalBody = "Test modalBody";
  var modalInstance = null;

  $scope.open = function() {  
      modalInstance = $uibModal.open({
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          templateUrl: 'myModalContent.html',
          controller: function($uibModalInstance) {

              var self = this;
              self.modalHeader = modalHeader;
              self.modalBody = modalBody;
              self.list = [{}, {}];

              self.ok = function() {
                  $uibModalInstance.close();
              };

              self.cancel = function() {
                  $uibModalInstance.dismiss('cancel');
              };
          },
          controllerAs: 'ctrl'
      });
  }
  
  $timeout(function(){
    if (modalInstance) modalInstance.close();
  }, 5000);
   
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="App">
  <div ng-controller="facilitoController">
    <button class="btn btn-primary" type="button" ng-click="open()">Open</button>

    <script type="text/ng-template" id="myModalContent.html">
          <div class="modal-header">
              <h3 class="modal-title" id="modal-title">{{ctrl.modalHeader}}</h3>
          </div>
          <div class="modal-body" id="modal-body">
              {{ctrl.modalBody}}

          <ul ng-repeat="item in ctrl.list">
          <li ng-repeat="(key,value) in item">{{value}}</li>
          </ul>
          </div>
          <div class="modal-footer">
              <button class="btn btn-primary" type="button" ng-click="ctrl.ok()">OK</button>
          </div>
      </script>
  </div>
</body>

Answer 4

使用

if(condition){
      $('#modal_id').modal('hide');
   }

如何关闭我们想要的弹出窗口

4 个答案: