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

已编辑：问题在于“过渡进入”css类，如果删除它，则隐藏起作用。

检查git是否有角度材质，似乎$ mdDialog使用“transition-in”类来显示对话框并“转出”来隐藏它，所以如果你包含“transition-in”那么它将禁用隐藏

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

1 个答案: