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

Question

我正在尝试放置一个 Angular Material dialog在指令的链接函数中。从概念上讲，我不明白为什么这是不可能的。根据文档，$mdDialog.show 在范围内，$mdDialog.hide(); 位于由 $mdDialog.show 定义的 Controller 中 对象。我已经能够让对话框弹出——虽然 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 类，如果您将其删除，则隐藏有效。

检查 Angular Material 的 git，似乎 $mdDialog 使用“transition-in”类来显示对话框和“transition-out”来隐藏它，所以如果你包含“transition-in”那么它将禁用隐藏.