web-dev-qa-db-ja.com

AngularJSで同じモーダルインスタンスを表示/非表示にする方法は？

現在、angular-ui-bootstrap $ modalを使用して、ユーザーがファイルを検索して選択できるダイアログを表示しています。ファイルのリストはbox.comから取得されているため、box APIを使用してファイルを検索し、検索結果の各ファイルの横に表示するサムネイルを生成します。

サムネイルの生成は非常に遅く、ユーザーは同じページでこの検索ダイアログを複数回呼び出す必要があります。したがって、再度開いたときに検索ダイアログに以前の検索結果が含まれると、ユーザーにとって役立ちます。

問題は、同じモーダルインスタンスをどのように再利用（つまり表示/非表示）できるかということです。 Angular-uiは、毎回ダイアログを破棄/再作成しているようです。角度ストラップでも同じです。

編集

ここに Plunkr ：

var app = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {

  $scope.open = function() {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,

    });

    modalInstance.result.then(function() {
      $log.info('Modal closed at: ' + new Date());
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function($scope, $modalInstance) {

  $scope.friends = [{
    name: 'John',
    phone: '555-1276'
  }, {
    name: 'Mary',
    phone: '800-BIG-MARY'
  }, {
    name: 'Mike',
    phone: '555-4321'
  }, {
    name: 'Adam',
    phone: '555-5678'
  }, {
    name: 'Julie',
    phone: '555-8765'
  }, {
    name: 'Juliette',
    phone: '555-5678'
  }];

  $scope.ok = function() {
    $modalInstance.close('close');
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };

};
angularjsangular-ui-bootstrapangular-strap
12
Guillaume Morin

Ng-strapモーダルを作成/非表示にするには、次のように使用できます。

     var modalInstance;
        $scope.open = function() {    
            modalInstance= $modal.open({
                   templateUrl: 'myModalContent.html',
                   controller: ModalInstanceCtrl,        
            });
 //This is how to show the modal.

        modalInstance.$promise.then(modalInstance.show);
        };

    //When u want to hide the modal use this as written below:    
    $scope.close = function() {
        modalInstance.hide();
    };
1
Rahul Tiwari

モーダルを作成するには、次のようにします。

var planModal = $modal({scope: $scope,
            template: 'modalTemplate.html',
            show: false});

「show」属性はfalseに設定されており、ロード時にモーダルが表示されなくなります。

このモーダルを表示するには、次のようにします。

planModal.$promise.then(planModal.show);

同様に、このモーダルを非表示にするには、次のようにします。

planModal.$promise.then(planModal.hide);
0
user1005240
     <div class="modal fade in" id="invoice_popup" ng-show="showInvModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <!--3rd next popup-->
                <div id="Div2" class="modal-dialog" style="width: 40%;">
                    <div class="modal-content" style="margin-top:6%;margin-left:8%;">
                        <div class="modal-header" style="padding:6px;">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size:30px;">&times;</button>
                            <h4 class="modal-title" id="H1"><label>Invoice Summary</label></h4>

                        </div>
                        <div class="modal-body" style="padding:5px;">
    </div>
                        <div class="modal-footer">
                            <div class="draft-btn-bottom">
                                <a href="JavaScript:viod(0);" ng-click="make_invoice()">Save</a>
                                <a href="JavaScript:viod(0);" data-dismiss="modal">Cancel</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

    // angular js controler code in a function
$scope.Open_Modal_Popup = function () {
     var popup_inv = angular.element("#invoice_popup");
                popup_inv.modal('show');
               $scope.showInvModal = true;
}
0
Saikh Rakif

うーん、これに苦労しました。cssを使用するだけで、モーダルウィンドウの表示/非表示に次のルールを使用できます。

 angular.element('.modal').css('display', 'none');// to hide the modal
 angular.element('.modal').css('display', 'block');// to show the modal
0
kay

同じモーダルインスタンスを表示/非表示にすることは（少なくとも、すてきでクリーンな方法で）不可能ですが、それでも少しスピードアップできる可能性があります。その方法は、thumbnail generationの意味によって異なります。

つまり、すべての画像のダウンロードに時間がかかるために時間がかかる場合、考えられる解決策は、ダイアログを表示しようとするまでにブラウザによってすでにキャッシュされるように、すべての画像を事前にダウンロードすることです。 この回答 その方法を説明します。

一方、「サムネイル生成」とは、すべてのアセットがダウンロードされた後に実際にサムネイルをレンダリングすることを意味し、それに時間がかかる場合は、cssを調べて、作成するものを単純化できるかどうかを確認することをお勧めします。ブラウザの仕事が簡単になります。

0
irfanka