Como ocultar / mostrar a mesma instância modal com o AngularJS?
Atualmente, estou usando o angular-ui-bootstrap $ modal para exibir uma caixa de diálogo que permite ao usuário pesquisar e escolher um arquivo. A lista de arquivos vem de box.com, então eu uso a API box para procurar arquivos e gerar uma miniatura para exibir ao lado de cada arquivo no resultado da pesquisa.
A geração de miniaturas é bastante lenta e o usuário precisa chamar esse diálogo de pesquisa várias vezes na mesma página. Portanto, seria útil para o usuário se a caixa de diálogo de pesquisa contivesse os resultados da pesquisa anterior quando reaberta.
A questão é como posso reutilizar (ou seja, mostrar / ocultar) a mesma instância modal? O Angular-ui parece destruir / recriar o diálogo a cada vez. A mesma coisa com a cinta angular.
Editar
Aqui está umPlunkr:
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');
};
};