如何在我们想要的地方关闭弹出窗口答案

【问题标题】：How to close the popup where ever we want如何在我们想要的地方关闭弹出窗口
【发布时间】：2017-06-22 18:05:10
【问题描述】：

这里我有一个引导弹出窗口。它工作正常。当我们单击确定按钮时它将关闭弹出窗口。但我想在特殊情况下关闭弹出窗口。

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

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'
        });
    }

};

【问题讨论】：

在控制器的依赖项中注入 $uibModalInstance（第 3 行）

标签： javascript html angularjs bootstrap-4

【解决方案1】：

使用模态实例来关闭模型

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

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

【讨论】：

出现错误 Unknown provider: $uibModalInstanceProvider
angular.min.js:118 TypeError: Cannot read property 'close' of undefined
不允许 var $scope.modalInstance =

【解决方案2】：

您试图在弹出窗口打开之前关闭它，所以在调用此 open 方法时出现此错误？

【讨论】：

是的。如果我打开然后它正在打开另一个弹出窗口并且它甚至没有关闭
当我们想要打开弹窗时，我会调用 open 函数

【解决方案3】：

使用

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

【讨论】：

【解决方案4】：

您已将$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>

【讨论】：

我也这样做了。如果我这样做，我会得到 Unknown provider: $uibModalInstanceProvider
不错的答案...发现相同