當我們加載第二次時，Bootstrap彈出不顯示

Question

我有一個引導模式如下。我正在使用ng-show來觸發模態。彈出來了，當我加載它第一次，當我關閉彈出，然後重新運行第二次彈出不來就算x.length是出現零0

<div class="modal fade in" id="modal" aria-hidden="false" style="display: block;" role="dialog" ng-show="x.length==0" data-toggle="modal" data-target="#modal" > 
              <div class="modal-dialog" > 

             <!-- Modal content--> 
             <div class="modal-content"> 

             <div class="modal-body" style="background-color: #428bca"> 
              <p ><font color="#FFFFFF">testing</font> 
              <button type="button" class="btn btn-default" data-dismiss="modal" onclick="$('#modal').remove();">Close</button> 
             </div> 

             </div> 

            </div> 
    </div> 

Answer 1

要創建的模式的方式成爲問題所在。如果按照我在代碼片段中顯示的方式創建模式，它將起作用。 data-toggle =「modal」和data-target =「＃modal」需要在觸發模態的元素上，並關閉模態，所有你需要的就是data-dismiss =「modal」。您可以用ng-show條件顯示或隱藏您的觸發元素。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.x = []; 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div data-toggle="modal" data-target="#modal" ng-show="x.length==0">Click Here</div> 
 
    <div class="modal fade in" id="modal" role="dialog"> 
 
    <div class="modal-dialog" > 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-body" style="background-color: #428bca"> 
 
      <p><font color="#FFFFFF">testing</font></p> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

如果你不想在你的HTML觸發要素如上面的例子，然後從你的控制器，可以顯示使用$（「＃模式」）。模態的模態（'show'）並使用$（'＃modal'）。modal（'hide'）隱藏它。看看這裏的模式選項 - https://v4-alpha.getbootstrap.com/components/modal/#usage

更新： 基於評論，以下片段顯示如何顯示/隱藏模式，而無需觸發按鈕。它使用上面列出的引導模式選項 -

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.x = []; 
 
    if($scope.x.length === 0){ 
 
     $("#modal").modal('show'); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div class="modal fade in" id="modal" role="dialog"> 
 
    <div class="modal-dialog" > 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-body" style="background-color: #428bca"> 
 
      <p><font color="#FFFFFF">testing</font></p> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>