Search code examples
javascriptangularjsangular-materialmddialog

Angular Material $mdDialog.confirm with more than "OK" and "Cancel" options


I have to build an $mdDialog window in Angular Material so that the user can select from different actions. Based on the selected actions, the app will either generate a new report or load an already existing report, or Cancel the dialog altogether. The problem is that the confirm $mdDialog has only the .ok option and .cancel option built in it, if you look at the documentation on the Angular Material site (I attached a print screen with the demo code snippet from the site).

$mdDialog confirm demo code

So now my question is: how can I add multiple action options to my $mdDialog window. Also, how do I tie functions to those options in the controller? For example, if you select "Generate new report", then a certain service would fire, but if you select "Show me the previous report", another service to fire. Sorry if this is a beginner question, but I feel like I am again not fully grasping the correct AngularJS logic to be applied in this situation.


Solution

  • You can use a custom template for your confirm dialog.

    var confirm = $mdDialog.confirm({
          controller: DialogController,
          templateUrl: 'dialog1.tmpl.html',
          parent: angular.element(document.body),
          targetEvent: ev,
        })
        $mdDialog.show(confirm).then(function() {
          $scope.status = 'Confirm resolved';
          $scope.codeRunningBeforeResolve = 'code only runs after resolve';
        });
    

    Codepen