Question

我想在外面点击或按键盘中的esc时阻止模态关闭。所以我使用了backdrop:'static'和keyboard:false，如下所示，

    var app = angular.module('MyApp', ['ngDialog', 'chatSocket']);

    app.controller('MainCtrl', function ($scope, ngDialog) {
    $scope.openChatBox = function() {
      ngDialog.openConfirm({
        template: 'chatBox.html',
        controller: 'msgController',
        backdrop: 'static',
        keyboard: false,
        scope: $scope //Pass the scope object if you need to access in the template
    }).then(
        function(value) {
            //You need to implement the saveForm() method which should return a promise object
            $scope.closeChat().then(

            );
        },
        function(value) {
            //Cancel or do nothing
        }
    );
};

});

点击按钮打开模态，

 <button ng-click="openChatBox()" >Open</button>

我的代码有什么问题，为什么不工作？

Answer 1

对于$modal，我们使用backdrop和keyboard选项来实现它，但对于ngDialog，选项为closeByDocument和closeByEscape。

$scope.openChatBox = function() {
    ngDialog.openConfirm({
        template: 'chatBox.html',
        controller: 'msgController',
        closeByDocument: false,
        closeByEscape: false,
        scope: $scope //Pass the scope object if you need to access in the template
    }).then(
        function(value) {
            //You need to implement the saveForm() method which should return a promise object
            $scope.closeChat().then(

            );
        },
        function(value) {
            //Cancel or do nothing
        }
    );
};

Answer 2

使用closeByDocument：false，而不是背景，以防止页面在背景点击时关闭。

    template: 'chatBox.html',
    controller: 'msgController',
    closeByDocument: false,
    keyboard: false,

Answer 3

在backdrop: 'static'：

打开时，您应该在模式上使用$uibModal.open()

$uibModal.open({
    template: 'chatBox.html',
    controller: 'msgController',
    backdrop: 'static', // <--
    ...
});

查看AngularUI modal docs。

Answer 4

似乎ngDialog不支持背景静态。所以最好使用$ model.open

$scope.openChatBox = function() {
    var modalInstance = $modal.open({
                    template: 'chatBox.html',
                    controller: 'msgController',
                    backdrop: 'static',
                    keyboard: false,
                    scope: $scope
                });
                modalInstance.result.then(function () {
                    function(value) {
                       // do something
                   },
                   function(value) {
                      //Cancel or do nothing
                   }
                });
}

背景：＆＃39;静态＆＃39;不适用于ngDialog模式

4 个答案: