Angular UI Bootstrap模式

我使用Angular UI Bootstrap模式（ui.bootstrap.dialog），我有背景：true & backdropClick：true。Angular UI Bootstrap模式

但是当用户点击远离模态时，我想要执行的不仅仅是附近的功能。

我在看源代码，认为我可以覆盖Dialog.prototype._bindEvents，但一直没有这样做。

我也认为这可能是'隐藏'事件在原始引导模式，但我无法赶上这个事件。

有没有办法定义一个函数来执行背景点击，以及如何去做。

感谢 --MB

来源

2013-05-17 Massive Boisson

对话框类是被改写的权利，但对于一个快速和肮脏的，你可以修改选项对象接收功能上接近，在接近原型被调用，调用该函数如果它不为空：

注意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(); 
}

控制器：在写作my_dlg.handleBackDropClick http://plnkr.co/edit/iBhmRHWMdrlQr4q5d1lH?p=preview

来源

2013-05-17 21:08:52 lucuma

嗨lucuma，感谢您的答复。我试图在不改变原始代码的情况下做一些事情 - 请查看上面的答案？我认为这比你更容易实施，但我不确定是否缺少某些东西。谢谢。 –

这也没关系，我的执行是否你点击背景或按钮被退出键或按钮（从控制器）关闭，但我想这可能不是你想要的。 – lucuma

在背景上点击模式自动关闭。我们可以限制用户点击背景幕时，模式不应该关闭吗？ –

什么：

function doSomething() { 
    alert('something'); 
    } 

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

我嘲笑这件事吗？

来源

2013-05-17 22:28:40

角度ui团队正在重写对话框控制器。我怀疑你会因为弄乱源头而伤害自己，因为我期望新版本会有很大的不同。无论如何，在你的具体情况下，做什么适合你。 – lucuma

您可以在观看模式的范围destory事件：

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

或解决你的模式和连锁了一个新的通过DI通过了解散的承诺。

在创建模式注入延迟对象（永远的承诺）：

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); 
});

来源

2013-11-15 13:50:07 Oliver

您可以使用

backdrop: 'static'

在你的选择

。就像这样：

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

来源

2014-12-03 11:41:45 Tavousi

谢谢！这帮了我很多......我准备改变角度的来源，但它已经完成了。 – DomenicDatti

我知道这是一个老问题，但自从我来到这里，发现一个解决方案之后...

，您可以观看“modal.closing”事件，广播到模式的范围如下：

.controller('modalCtrl', function($scope, $modalInstance) { 

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

第二个参数是原因（无论传递给$ close（）方法）。点击背景时，原因是背景点击

这里工作plunker

来源

2015-09-21 15:25:56

我发现这很有用，所以谢谢你添加到这个老问题。 – MarkMYoung

Angular UI Bootstrap模式

回答

相关问题