【问题标题】:Angular UI Bootstrap modalAngular UI Bootstrap 模式
【发布时间】:2013-05-17 20:45:37
【问题描述】:

我正在使用 Angular UI Bootstrap 模式 (ui.bootstrap.dialog),并且我有背景:true 和背景点击:true。

但是当用户点击离开模式时,我不仅要执行关闭,还要执行其他功能。

我正在查看源代码,认为我可以覆盖 Dialog.prototype._bindEvents 但没有任何运气。

我也认为这可能是原始引导模式中的“隐藏”事件,但我无法捕捉到这个事件。

有没有办法定义一个在背景点击时执行的函数,以及如何去做。

谢谢 --MB

【问题讨论】:

    标签: angularjs angular-ui-bootstrap


    【解决方案1】:

    我知道这是一个老问题,但是自从我来到这里并后来找到了解决方案......

    您可以观看 'modal.closing' 事件,广播到 modal 的范围内,如下所示:

    .controller('modalCtrl', function($scope, $modalInstance) {
    
      $scope.$on('modal.closing', function(event, reason, closed) {
          console.log('reason: ', reason);
      });
    })
    

    第二个参数是原因(无论传递给 $close() 方法)。点击背景的原因是背景点击

    这是一个工作的plunker

    【讨论】:

    • 我发现这很有用,所以感谢您添加到这个老问题。
    【解决方案2】:

    现在正在重写对话框类,但是为了快速和肮脏,您可以修改选项对象以接收要在关闭时调用的函数,在关闭原型中,如果该函数不为空,则调用该函数:

    注意closeFn

    var defaults = {
        backdrop: true,
        dialogClass: 'modal',
        backdropClass: 'modal-backdrop',
        transitionClass: 'fade',
        triggerClass: 'in',
        resolve:{},
        closeFn:null,  // added with null default
        backdropFade: false,
        dialogFade:false,
        keyboard: true, // close with esc key
        backdropClick: true // only in conjunction with backdrop=true
        /* other options: template, templateUrl, controller */
      };
    

    在关闭原型中:

    if (self.options.closeFn!==null) {
       self.options.closeFn();   
    }
    

    控制器:

     function doSomething() {
        alert('something');
      }
    
      $scope.opts = {
        backdrop: true,
        keyboard: true,
        backdropClick: true,
        template:  t, // OR: templateUrl: 'path/to/view.html',
        controller: 'TestDialogController',
        closeFn: doSomething
      };
    

    我在这里模拟了这个:http://plnkr.co/edit/iBhmRHWMdrlQr4q5d1lH?p=preview

    【讨论】:

    • 嗨 lucuma,感谢您的回复。我尝试在不更改原始代码的情况下做某事 - 请查看上面的答案?我认为它比你的更容易实现,但我不确定我是否遗漏了什么。谢谢。
    • 这也很好,无论您单击背景还是按钮被退出键或按钮(来自控制器)关闭,我的都会执行,但我想这可能不是您想要的。
    • 在背景点击模式自动关闭。我们可以限制用户点击背景时,模式不应该关闭吗?
    【解决方案3】:

    您可以在模态中观看范围破坏事件:

    $scope.$on('$destroy', function () {});

    或者在你的modal中解决dismiss promise并链接一个通过DI的新promise。

    在创建模式时注入一个延迟对象(绝不是承诺):

    var close = $q.defer();
    var modalInstance = $modal.open({
        ...
        closePromise: function () {
            return close;
        }
    });
    
    close.promise.then(function ( someData ) {
        // On every modal close
    });
    

    在模态中:

    //                         resolve       dismiss
    $modalInstance.result.then(angular.noop, function () {
        closePromise.resolve( someData );
    });
    

    【讨论】:

      【解决方案4】:

      你可以使用

      backdrop: 'static'
      

      在您的选择中。像这样:

      var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          backdrop: 'static',
          ...
      });
      

      【讨论】:

      • 谢谢!这对我帮助很大......我已经准备好更改 Angular 的源代码,但它已经完成了。
      【解决方案5】:

      重写 my_dlg.handleBackDropClick 怎么样?

      【讨论】:

      • Angular ui 团队正在重写对话框控制器。我怀疑你会因为弄乱源而对自己造成太大伤害,因为我希望新版本会有很大不同。无论如何,在你的具体情况下做对你有用的事情。
      猜你喜欢
      • 2016-12-17
      • 2014-07-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-23
      • 1970-01-01
      相关资源
      最近更新 更多