2回目のロード時にブートストラップのポップアップが表示されない

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-tomle = "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>