I have been attempting to include an Angular Material dialog within a directive's linking function. In theory, it seems like this should work without any issues. According to the documentation, the $mdDialog.show method belongs to a scope and the $mdDialog.hide() is located in a controller defined by the object returned from $mdDialog.show. I managed to make the dialog appear successfully, but even though the closeModal() function gets executed (as evidenced by console logs), unfortunately, $mdDialog.hide() does not execute and the modal remains visible.
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.';
});
};
}
};
}]);
What could be causing this issue? Is it perhaps impossible to create an mdDialog modal from within a directive?
Here is the Plnkr I've been experimenting with:
http://plnkr.co/edit/qVczPkuZgtL2CCtLRFrH?p=preview
Thank you for your assistance. This problem has been frustrating me for hours.