如何關閉我們想要的彈出窗口

這裏我有一個引導彈出窗口。它工作正常。當我們點擊確定按鈕時它會關閉彈出窗口。但我想關閉特殊情況下的彈出窗口。如何關閉我們想要的彈出窗口

當滿足以下條件時我想關閉已經打開的彈出窗口。

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

但它沒有關閉彈出窗口。我在控制檯上收到以下錯誤。

ReferenceError: $uibModalInstance is not defined

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

};

來源

2017-06-22 Murali

進樣$：

看看工作的例子，如果在彈出被打開之前，將關閉在控制器初始化後5秒彈出uibModalInstance在你的控制器的依賴（第三行） – Antikhippe

使用模式的實例關閉模型

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

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

來源

2017-06-22 08:18:47 aseferov

它提供了一個錯誤未知提供程序：$ uibModalInstanceProvider < - $ uibModalInstance < - facilitoController – Murali

update我的回答 – aseferov

angular.min.js：118 TypeError：無法讀取未定義的屬性'close' – Murali

您試圖在打開它之前關閉彈出窗口，以便在調用此打開的方法時發生此錯誤？

來源

2017-06-22 08:13:23

是的。如果我打開然後它打開另一個彈出窗口，它甚至不關閉，即使 – Murali

當我們想要打開彈出窗口，然後我會打開函數 – Murali

您已經注入$uibModalInstance到您的模態控制器，但你有沒有做過這對facilitoController。你必須把它注射到能夠訪問它像：app.controller('facilitoController', function($scope, $window, $filter, $uibModal, $uibModalInstance) { ... });

UPDATE：我的第一個假設是不正確的，因爲$uibModalInstance是本地人，不是一個正常的注射。所以你可以簡單地將它注入facilitoController。由於open方法返回一個模態實例，您可以將其分配給局部變量，然後在需要時手動關閉它。請注意：在實例初始化之前無法關閉它，並且在您的方法中打開彈出窗口。

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>

來源

2017-06-22 08:35:12

我也這樣做了。如果我這樣做我得到未知的提供者：$ uibModalInstanceProvider < - $ uibModalInstance < - facilitoController – Murali

@Murali請看看更新的答案。 –

好的答案...發現一樣 – Murali

使用

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

來源

2017-06-22 09:23:26

如何關閉我們想要的彈出窗口

回答

相關問題