如何用AngularJS隱藏/顯示相同的模態實例？

我目前使用angular-ui-bootstrap $ modal來顯示一個讓用戶搜索並選擇一個文件的對話框。文件列表來自box.com，因此我使用Box API來搜索文件並生成縮略圖以顯示在搜索結果中的每個文件旁邊。如何用AngularJS隱藏/顯示相同的模態實例？

生成縮略圖非常慢，用戶需要在同一頁面多次調用此搜索對話框。因此，如果搜索對話框在重新打開時包含先前的搜索結果，則對用戶有幫助。

問題是我該如何重新使用（即顯示/隱藏）相同的模態實例？ 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'); 
    }; 

};

來源

2014-02-05 Guillaume Morin

試試我的對話模塊https://github.com/doodeec/dcom-angular-dialog它支持的選項隱藏它時保留DOM中的對話框 – doodeec

創建模式，你可以這樣做是這樣的：

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

「顯示」屬性設置爲false這會在模型加載時停止顯示。

要顯示該模式那麼我們可以這樣做是這樣的：

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

同樣，爲了掩蓋這一模式，我們可以這樣做是這樣的：

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

來源

2015-01-07 13:11:46 user1005240

此解決方案不適用於bootstrap-ui的新版本 – Vivek

是的，'show'選項在bootstrap-ui中不可用 - https://angular-ui.github.io/bootstrap/ 。 – xeon48

Hmmmm掙扎，這是最好的事情做它的只是使用CSS遵循以下規則可用於顯示/隱藏模式窗口

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

來源

2016-01-27 13:19:54 kay

顯示/ hidi相同的模態實例是不可能的（至少在一個很好的，乾淨的方式），但你可能仍然能夠加快一點。如何做到這一點取決於你的意思是thumbnail generation。

換句話說，如果由於下載所有圖像需要很長時間而速度很慢，那麼可能的解決方案是預先下載所有圖像，以便在您嘗試顯示圖像時已經通過瀏覽器緩存它們對話。 This answer解釋瞭如何做到這一點。另一方面，如果通過「縮略圖生成」，您的意思是在所有資源下載完成後實際渲染縮略圖，並且這需要很長時間，那麼您可能需要查看一下您的CSS，看看您是否可以簡化任何事情，使瀏覽器的工作更輕鬆。

來源

2016-04-26 07:28:33 irfanka

創建/隱藏NG-帶模態，你可以使用它像這樣：

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

來源

2016-05-16 12:49:10

如何用AngularJS隱藏/顯示相同的模態實例？

回答

相關問題