AngularJS Material using $mdDialog in a directive linking function

Question

I am trying to put an Angular Material dialog in a directive's linking function. Conceptually, I'm not seeing why this would not be possible. As per the docs, the $mdDialog.show is on a scope and $mdDialog.hide(); rests in a controller defined by the $mdDialog.show object. I've been able to get the dialog to popup—and though closeModal() executes (I can tell by the console.log), $mdDialog.hide() never executes and the modal never hides.

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.';

                    });

                };

            }

        };
    }]);

Why is this not working? Is it simply not possible to define a mdDialog modal from within a directive?

Here is a Plnkr I've been tinkering with:

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

Thanks a bunch. This has driving me nuts for several hours.

Solution

Edited : the issue is with "transition-in" css class, if you remove it the hide works.

Check the git for angular material, it seems $mdDialog using "transition-in" class to show the dialog and "transition-out" to hide it, so if you include "transition-in" then it will disable the hide.

Comments

[nikk wong]

Thanks for the help! Unfortunately, the bug still persists -> plnkr.co/edit/qVczPkuZgtL2CCtLRFrH?p=preview

[kwangsa]

i edited my comment as it looks like when i remove the css class it works

[nikk wong]

Awesome. How did you figure that out? I wouldn't have figured that out in a million years. Many thanks.

[kwangsa]

Trial & error, usually i remove everything to bare minimum and start adding thing

[nikk wong]

Stinks that sometimes that is the only technique :-) thanks for the help!

[omer]

i had a similar problem, end up to be a dialog html setting mistake, instead of writing <md-dialog> and inside of it <md-dialog-content> i wrote a regular <md-content>... took me a while to find it..