如何使用角带式模态的onHide选项

时间:2016-05-26 15:03:56

标签: javascript angularjs angular-strap

我使用角带和模态服务。我尝试使用参数onHide关闭模态时调用函数。

var _modal = $modal({
            templateUrl: "app/pages/fee/modals/historic/fee.historic.html",
            controller: "HistoricController",
            controllerAs: "vm",
            keyboard: true,
            show: false,
            onHide: function() {
                console.log("Close !");
            },
            onShow: function() {
                console.log("Open !");
            }
        });
_modal.$promise.then(_modal.show);

但是当我关闭我的模态时没有任何反应,我在控制台中看不到任何日志(关闭或打开)。 提前感谢任何能够给我一些想法的人!

1 个答案:

答案 0 :(得分:5)

经过一番调查后发现这是一个有趣的案例。

分布式版本中似乎$modal不同步!我的意思是当凉亭或npm取出角带时。

  1. 查看您自己的本地版本的angular-strap,即使在最新版本2.3.8中,您也可以找到对onShowonHide

  2. 看一下github repo上的来源 - > https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js

  3. 此处onShowonHide实际上被解雇了!因此,似乎模态与分布式版本中的其他角度带不同步。

    这不是错误的文档(我实际上相信很长一段时间),但我们下载的源代码不是最新的!

    因此,如果你想要支持onShow等,你必须将最新的/modal从github repo合并到你的本地角带中。我个人不会这样做,因为它会在升级时引起各种问题等等 - 我坚持原来的答案,但现在至少我知道为什么我必须这样做。

    根据我的经验,使用onShow等选项是没用的。我在modal.show / modal.hide事件上使用处理程序,这些事件始终是广播的。如果你有一个多模态环境(模态超过模态),“标记”模态以避免混淆。

    var _modal = $modal({
      templateUrl: "app/pages/fee/modals/historic/fee.historic.html",
      controller: "HistoricController",
      controllerAs: "vm",
      keyboard: true,
      show: false,
      tag: 'myModal'
    }
    
    $scope.$on('modal.show', function(e, target) {
      if (target.$options.tag == 'myModal') {
        //do stuff here
      }
    })
    $scope.$on('modal.hide', function(e, target) {
      if (target.$options.tag == 'myModal') {
        //do stuff here
      }
    })