AngularJS Material 在指令链接函数中使用 $mdDialog

Question

我正在尝试将 Angular Material dialog 放入指令的链接函数中。从概念上讲，我不明白为什么这是不可能的。根据文档，$mdDialog.show 在范围内，$mdDialog.hide(); 位于由 $mdDialog.show 对象定义的控制器中。我已经能够让对话框弹出——尽管 closeModal() 执行（我可以通过 console.log 判断），$mdDialog.hide() 永远不会执行并且模式永远不会隐藏。

angular.module('app', ['ngMaterial'])
    .directive('addLayer', ['$mdDialog', function($mdDialog) {

        return {

            template: '<h1 ng-click="openDialog()">Open Dialog</h1><div>alert: {{alert}}</div>',
            scope: {},
            link: function(scope) {

                scope.alert = '';
                scope.addLayerDialog = function() {

                    $mdDialog.show({

                        parent: angular.element(document.body),
                        templateUrl: {...},
                        controller: function($scope, $mdDialog) {

                            $scope.hide = function() {
                                $mdDialog.hide();

                            };

                            $scope.cancel = function() {

                                $mdDialog.cancel();

                            };

                            $scope.answer = function(answer) {
                                console.log($mdDialog.hide('answer'));
                                $mdDialog.hide(answer);

                            };
                        }

                    }).then(function(answer) {

                        scope.alert = 'You said the information was "' + answer + '".';

                    }, function() {

                        scope.alert = 'You cancelled the dialog.';

                    });

                };

            }

        };
    }]);

为什么这不起作用？是否根本不可能从指令中定义 mdDialog 模态？

这是我一直在修改的 Plnkr：

http://plnkr.co/edit/qVczPkuZgtL2CCtLRFrH?p=preview

非常感谢。这让我发疯了几个小时。

Answer 1

已编辑：问题出在 "transition-in" css class，如果您将其删除，则隐藏有效。

检查 angular material 的 git，似乎 $mdDialog 使用 "transition-in" class 来显示对话框并使用 "transition-out" 来隐藏它，所以如果你包括 "transition-in" 那么它将禁用隐藏。