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