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

发布时间：2020-12-17 07:33:37 所属栏目：安全来源：网络整理

导读：我正在使用angular-ui-bootstrap $modal来显示一个对话框,让用户搜索并选择一个文件.文件列表来自box.com,所以我使用框API来搜索文件,并生成一个缩略图,显示搜索结果中每个文件的旁边. 缩略图生成相当慢,用户需要在同一页面中多次调用此搜索对话框.因此,如果

我正在使用angular-ui-bootstrap $modal来显示一个对话框,让用户搜索并选择一个文件.文件列表来自box.com,所以我使用框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');
  };

};

要创建/隐藏ng-band模式,您可以使用它：

var modalInstance;
        $scope.open = function() {    
            modalInstance= $modal.open({
                   templateUrl: 'myModalContent.html',});
 //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();
    };

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!