angular material how to pass data to preset dialog

Question

I am using Angular Material and I have created a simple preset dialog using $mdDialogProvide:

angular.module('starterApp').config([
  '$mdDialogProvider',
  function ($mdDialogProvider) {
    $mdDialogProvider.addPreset('warning', {
      options: function () {
        return {
          template:
          '<md-dialog>' +
          '{{dialog.warning}}' +
          '</md-dialog>',
          controllerAs: 'dialog',
          theme: 'warning'
        };
      }
    });
  }
]);

And I want to pass a warning message on invoking it. I tried to pass a message for example like this:

    $mdDialog.show(
      $mdDialog.warning({
        locals: {
          warning: 'Warning message'
        }
      })
    );

But is does not work.

Actually I checked a lot of solutions, but none of them is working. There is no example like this in documentation neither.

Is it possible to pass some date to preset dialog?

Answer 1

Here is one way to do it - CodePen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-button ng-click="showDialog()">Show Dialog</md-button>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.config([
  '$mdDialogProvider',
  function ($mdDialogProvider) {
    $mdDialogProvider.addPreset('warning', {
      options: function () {
        return {
          template:
          '<md-dialog aria-label="Dialog">' +
          '{{warning}}' +
          '</md-dialog>',
          controller: DialogController,
          theme: 'warning',
          clickOutsideToClose: true
        };
      }
    });

    function DialogController($scope, $mdDialog, locals) {
      console.log(locals);
      $scope.warning = locals.warning;
    }
  }
])

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.showDialog = function () {
    $mdDialog.show(
      $mdDialog.warning({
        locals: {
          warning: 'Warning message'
        }
      })
    );
  }
});

Answer 2

The fast ES6 way

Create a controller with scope variables on the fly

let warning = 'Warning message';

$mdDialog.show({
    templateUrl: 'dialog.template.html',
    controller: $scope => $scope.warning = warning
})

Template

warning is a $scope variable, thus available in the template

<md-dialog>
    <md-dialog-content>
        <span> {{warning}} </span>
    <md-dialog-content>
<md-dialog>