Angular Material $ mdDialog.confirm with OK and Cancel Options

Question

I need to create a $ mdDialog window in Angular Material so that the user can choose from different actions. Based on the selected actions, the application will either generate a new report, or load an existing report, or completely cancel the dialog. The problem is that in the confirmation of $ mdDialog there is only the .ok option and the .cancel option if you look at the documentation on the Angular Material website (I attached a print screen with a fragment of the demo code from the site).

$ mdDialog confirm demo code

So, now my question is: how to add several options to my $ mdDialog window. Also, how do I bind functions to these parameters in the controller? For example, if you select "Create a new report", then a certain service will be launched, but if you select "Show me previous report", another service to start. Sorry if this is a question for beginners, but I feel like I don’t fully understand the correct AngularJS logic that will be applied in this situation again.

Answer 1

You can use a custom template for your confirmation 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

Answer 2

@Aseem, , , .

Aseem . then, , . , :

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

, , OK .