Konrad Klimczak Konrad Klimczak - 3 months ago 239
AngularJS Question

angular material how to pass data to preset dialog

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

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