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

Question

我试图在指令的链接函数中放置一个Angular Material对话框.从概念上讲,我不明白为什么这是不可能的.根据文档,$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 类上，如果删除它，隐藏就会起作用。

检查 git 中的角度材料，似乎 $mdDialog 使用“transition-in”类来显示对话框并使用“transition-out”来隐藏它，所以如果您包含“transition-in”，那么它将禁用隐藏。