Angular stuff close mdDialog from template directive

Question

I am trying to close the dialog like this:

showAlert(ev) { this.mdDialog.show({ restrict: 'E', template:'<loader></loader>' + ' <md-button ng-click="this.mdDialog.hide()" class="md-primary">' + ' Close Dialog' + ' </md-button>' , parent: angular.element(document.body.childNodes[5]), clickOutsideToClose:true }); }; closeDialog() { this.mdDialog.hide(); }; 

but the button appears and does nothing. Any ideas?

Answer 1

I found the answer there http://webiks.com/mddialog-with-a-confirmation-dialog/ ,

in the latest plunker at https://embed.plnkr.co/HiLJlsp0yfcukxi2McNZ/ .

area property not required.

PS

Now I see @camden_kid's answer after it was released and fixed it for me, thanks.

Answer 2

Here you go - CodePen

Markup

 <div ng-controller="MyController as vm" class="md-padding" ng-cloak="" ng-app="app"> <md-button class="md-primary md-raised" ng-click="vm.show($event)">Open</md-button> </script> </div> 

Js

 angular.module('app',['ngMaterial']) .controller('MyController', function($scope, $mdDialog) { this.show = function(ev) { $mdDialog.show({ restrict: 'E', template:'<loader></loader>' + ' <md-button ng-click="vm.hide()" class="md-primary">' + ' Close Dialog' + ' </md-button>' , parent: angular.element(document.body), clickOutsideToClose:true, targetEvent: ev, controller: DialogController, controllerAs: "vm" }); }; }); function DialogController($scope, $mdDialog) { this.hide = function() { $mdDialog.hide(); }; }