2016-09-07 4 views
1

私は、この特定のブートストラップ確認モーダルが、私の望む機能で動作しない理由を理解しようとしています。それは、アラートウィンドウを起動する基本的な関数で動作するように見えますが、私が望む関数を置くと、関数が実行されます(この場合File-stackとMy dbからイメージを削除します)。しかし、モーダルウィンドウモーダルウィンドウは閉じますが、グレーのオーバーレイが止まり、ページが機能しなくなります。これを保持していると思われる関数は、下部に向かってmodal-footer divの最初のボタンにあります。閉じるボタンが正常に動作し、私はここでremoveMoreImage()機能の代わりに、単純な関数を入れると、再びそれが正常に動作し、ブートストラップモーダルのためのコードである:ここで角度の付いたブートストラップモーダル。モーダルが特定のdata-ng-click関数で閉じていない

 <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirm-modal-more"> <span class= "glyphicon glyphicon-remove-circle"></span> REMOVE IMAGE</button> 

     <div id="confirm-modal-more" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 

      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Remove Image Confirmation</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Are you sure you want to delete this image?</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-danger" data-ng-click="removeMoreImage(picture.url, car)" data-dismiss="modal" >REMOVE</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button> 
      </div> 
      </div> 

      </div> 
     </div> 

がハングアップを引き起こして実行される関数です。

var getIndexIfObjWithOwnAttr = function(array, attr, value) { 
    for (var i = 0; i < array.length; i++) { 
     if (array[i].hasOwnProperty(attr) && array[i][attr] === value) { 
      return i; 
     } 
    } 
    return -1; 
} 

$scope.removeMoreImage = function(image, data) { 
    var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image); 
    data.morePictures.splice(index, 1); 
    filepickerService.remove(image); 
    console.log(image + " has been removed!"); 
} 

洞察力やアドバイスは素晴らしいものです。同期の問題のようですが、わかりません。

答えて

0

モーダルを強制的に閉じるためにいくつかのクエリを使用しましたが、それは私が望んでいたほど優雅ではありませんがうまく機能しているようですが、うまくいくようです。これは、モーダルをハングアップしていた関数に追加したコードです。

$('#confirm-modal-more').modal('hide'); 
$('body').removeClass('modal-open'); 
$('.modal-backdrop').remove(); 
0

あなたは、関数内でモーダルを閉じ、親コントローラに結果を返すことができます。

$uibModalInstance.close('some result of modal'); 
$uibModalInstance.dismiss('some reason for discarding and closing'); 

$scope.removeMoreImage = function(image, data) { 
    var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image); 
    data.morePictures.splice(index, 1); 
    filepickerService.remove(image); 
    console.log(image + " has been removed!"); 

    // close modal 
    $uibModalInstance.close(); 
} 

https://angular-ui.github.io/bootstrap/#/modal

関連する問題