Ng-click on custom $ mdDialog with external template not working

Question

works for the first time with $ mdDialog. I use to create a dialog with an external HTML template.

So far, so good ... it works, the template can be opened, but the ng-click in html will no longer work.

And I can not find the reason for this.

mdDialog is called in userController as follows:

<md-icon layout="row" flex md-font-set="material-icons" class="active" ng-click="vm.showMenu($event)"> menu </md-icon> 

Method to open $ mdDialog in userController:

 vm.showMenu = function showMenu(ev){ $mdDialog.show({ controller: MenuDialogController, templateUrl: 'app/components/head/user/menu.dialog.html', parent: angular.element($document.body), targetEvent: ev, clickOutsideToClose:true, fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints. }) .then(function(answer) { $scope.status = 'You said the information was "' + answer + '".'; }, function() { $scope.status = 'You cancelled the dialog.'; }); }; 

And this is the dialog controller for the dialog in which the buttons do not work:

 angular .module('trax') .controller('MenuDialogController', MenuDialogController); function MenuDialogController() { var vm = this; vm.close = function close(){ alert('close clicked'); } vm.ok = function ok(){ alert('ok clicked'); } } 

And this is the html code for dialogController:

 <md-dialog aria-label="User Menu"> <form ng-cloak> <md-toolbar> <div class="md-toolbar-tools"> <h2>User Menu</h2> <span flex></span> <md-button class="md-icon-button" ng-click="vm.close($event)"> <md-icon md-font-set="material-icons">close</md-icon> </md-button> </div> </md-toolbar> <md-dialog-content> <div class="md-dialog-content"> <h2>Dialog Title</h2> <p>Dialog Text....</p> <p ng-click="vm.test($event)">test</p> </div> </md-dialog-content> <md-dialog-actions layout="row"> <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus> More on Wikipedia </md-button> <span flex></span> <md-button ng-click="vm.close($event)"> cancel </md-button> <md-button ng-click="vm.ok($event)"> ok </md-button> </md-dialog-actions> </form> </md-dialog> 

None of the ng clicks work!

Any hint for me?

Answer 1

  angular .module('trax') .controller('MenuDialogController', MenuDialogController); function MenuDialogController() { var vm = this; //Here change vm to $scope $scope.close = function close(){ alert('close clicked'); } $scope.ok = function ok(){ alert('ok clicked'); } } 

You must assign your functions to the $ area of ​​your dialog controller

Answer 2

To leave your code unchanged, you must add after

 var vm = this; 

with

 var vm = this; $scope.vm = vm; 

This way you can use it in your template.

Another way is to declare methods directly in $scope as

 $scope.close = function() { ... }; $scope.ok = function() { ... }; 

The first method is equal to the declaration of controllerAs: "vm" in the $mdDialog.show helper method

Answer 3

It looks like your setting is a bit off. Actually, it looks like you want to pass the region into this dialog. Taken from examples in $ mdDialog docs I could find the following ...

 // Dialog #3 - Demonstrate use of ControllerAs and passing $scope to dialog // Here we used ng-controller="GreetingController as vm" and // $scope.vm === <controller instance=""> 

It looks like you will need to change your implementation so that it matches this pattern. Try the following ...

 $mdDialog.show({ controller: MenuDialogController, templateUrl: 'app/components/head/user/menu.dialog.html', parent: angular.element($document.body), targetEvent: ev, clickOutsideToClose:true, fullscreen: $scope.customFullscreen, scope: $scope, // use parent scope in template preserveScope: true, // do not forget this if use parent scope }).then(function(answer) { $scope.status = 'You said the information was "' + answer + '".'; }, function() { $scope.status = 'You cancelled the dialog.'; }); 

Pay attention to the specified scope and preserveScope parameters.

 // Since MenuDialogController is instantiated with ControllerAs syntax // AND we are passing the parent '$scope' to the dialog, we MUST // use 'vm.<xxx>' in the template markup