如何隐藏/显示与AngularJS相同的模态实例?

前端之家收集整理的这篇文章主要介绍了如何隐藏/显示与AngularJS相同的模态实例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用angular-ui-bootstrap $modal来显示一个对话框,让用户搜索并选择一个文件.文件列表来自Box.com,所以我使用框API来搜索文件,并生成一个缩略图,显示搜索结果中每个文件的旁边.

缩略图生成相当慢,用户需要在同一页面中多次调用搜索对话框.因此,如果搜索对话框在重新打开时将包含以前的搜索结果,则对用户将是有帮助的.

问题是如何重复使用(即显示/隐藏)相同的模态实例?
Angular-ui似乎每次都会破坏/重新创建对话框.
角度相同的东西.

编辑

这是一个Plunkr

  1. var app = angular.module('plunker',['ui.bootstrap']);
  2. var ModalDemoCtrl = function($scope,$modal,$log) {
  3.  
  4. $scope.open = function() {
  5.  
  6. var modalInstance = $modal.open({
  7. templateUrl: 'myModalContent.html',controller: ModalInstanceCtrl,});
  8.  
  9. modalInstance.result.then(function() {
  10. $log.info('Modal closed at: ' + new Date());
  11. },function() {
  12. $log.info('Modal dismissed at: ' + new Date());
  13. });
  14. };
  15. };
  16.  
  17. // Please note that $modalInstance represents a modal window (instance) dependency.
  18. // It is not the same as the $modal service used above.
  19.  
  20. var ModalInstanceCtrl = function($scope,$modalInstance) {
  21.  
  22. $scope.friends = [{
  23. name: 'John',phone: '555-1276'
  24. },{
  25. name: 'Mary',phone: '800-BIG-MARY'
  26. },{
  27. name: 'Mike',phone: '555-4321'
  28. },{
  29. name: 'Adam',phone: '555-5678'
  30. },{
  31. name: 'Julie',phone: '555-8765'
  32. },{
  33. name: 'Juliette',phone: '555-5678'
  34. }];
  35.  
  36. $scope.ok = function() {
  37. $modalInstance.close('close');
  38. };
  39.  
  40. $scope.cancel = function() {
  41. $modalInstance.dismiss('cancel');
  42. };
  43.  
  44. };
要创建/隐藏ng-band模式,您可以使用它:
  1. var modalInstance;
  2. $scope.open = function() {
  3. modalInstance= $modal.open({
  4. templateUrl: 'myModalContent.html',});
  5. //This is how to show the modal.
  6.  
  7. modalInstance.$promise.then(modalInstance.show);
  8. };
  9.  
  10. //When u want to hide the modal use this as written below:
  11. $scope.close = function() {
  12. modalInstance.hide();
  13. };

猜你在找的Angularjs相关文章