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?

I'd like to help but I get this error in the console with my CodePen - "$mdDialogProvider is not defined". Do I have to inject anything into the controller to enable $mdDialogProvider? — camden_kid, Aug 23 '16 at 11:18
You need to inject "ngMaterial" to your app: angular.module('starterApp', ['ngMaterial', 'ui.router']) , but to be able to do that, you need to first include angular material: — Konrad Klimczak, Aug 23 '16 at 11:24
Yes, I have all of that - http://codepen.io/camden-kid/pen/yJWEog?editors=1010#0. It's strange... — camden_kid, Aug 23 '16 at 11:25
I have something like this: http://codepen.io/anon/pen/grJKzY?editors=1010#0 — Konrad Klimczak, Aug 23 '16 at 11:28

score 5 · Accepted Answer · answered Aug 23 '16 at 11:42

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'
        }
      })
    );
  }
});

score 1 · Answer 2 · answered Aug 25 '17 at 23:07

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>

angular material how to pass data to preset dialog

2 Answers2