Question

我的主html中有一个md对话框，我的控制器代码如下所示。

var dialogAppCtrl = function($scope,$mdDialog){
        $scope.openDialog = function(ev){
            $mdDialog.show({
                controller:'dialogCtrl',
                scope: $scope,
                preserveScope: true,
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: false,
                templateUrl: 'dialog.tmpl.html',
            })
        }
    };

我故意将clickOutsideToClose设为false。我实际上想要在用户点击外部时调用方法。

我有什么方法可以完成它吗？

jsfiddle上的

演示：http://jsfiddle.net/e5j1p6mo/

这里我点击按钮并将其工作正常设置为关闭，但是对话框仍未关闭？

Answer 1

你可以这样做：

在你dialogCtrl中的第一个你应该添加一个关闭函数并在cancel方法中传递一个参数，以便稍后捕获它：

$scope.close = function() {
    $mdDialog.cancel('button');
}

然后在您的模板dialog.tmpl.html中使用取消/关闭按钮调用它：

<md-button class="md-raised" ng-click="dialogCtrl.close()">Cancel</md-button>

或取决于您的代码：

<md-button class="md-raised" ng-click="close()">Cancel</md-button>

最后改变调用对话框的代码：

var dialogAppCtrl = function ($scope, $mdDialog) {
    $scope.openDialog = function (ev) {
        $mdDialog.show({
                controller: 'dialogCtrl',
                scope: $scope,
                preserveScope: true,
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: false,
                templateUrl: 'dialog.tmpl.html',
            })
            .then(function () {
                    // Success code here
                },
                function (e) {
                    if (e === 'button') {
                       // Cancel button was clicked
                    } else {
                       // Outside was clicked, do your stuff here
                    }
                })
    }
};

正如您所看到的，对话框仍在关闭（不幸的是没有事件）但您可以按照自己的意愿处理事件。

角度中的Md对话框用法

1 个答案: