Reusable Dialog

Reusable mdDialog with Angular Material

by Igor Rendulic

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<div ng-app="app" ng-cloak layout="column">
  <!-- Container #1 -->
  <md-toolbar layout="row" class="md-toolbar-tools">
    <h1>Angular Material - Reusable mdDialog demo</h1>
  </md-toolbar>

  <md-content flex id="content">
    <md-card ng-controller="ctrl">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Peronal Information</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        Person: {{myobject.name}}
        <br/> Age: {{myobject.age}}
      </md-card-content>
      <md-card-actions layout="row" layout-align="end center">
        <md-button class="md-raised" ng-click="openDialog(myobject, $event)">Open Dialog</md-button>
      </md-card-actions>
    </md-card>

    <md-card ng-controller="ctrlTwo">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Peronal Information In other controller</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        Person: {{myobject.name}}
        <br/> Age: {{myobject.age}}
      </md-card-content>
      <md-card-actions layout="row" layout-align="end center">
        <md-button class="md-raised" ng-click="openDialog(myobject)">Open Dialog Again</md-button>
      </md-card-actions>
    </md-card>
  </md-content>

</div>

JavaScript

var app = angular.module('app', ['ngMaterial']).config(function($mdThemingProvider, $mdDialogProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('blue')
    .accentPalette('grey');

  $mdDialogProvider.addPreset('personalInfo', {
    options: function() {
      return {
        //templateUrl: 'template/my_template.person.html',
        template: '<md-dialog aria-label="Dialog">' +
          '<md-toolbar>' +
          '<h2>My Dialog</h2>' +
          '</md-toolbar>' +
          'Name: <input type="text" ng-model="person.name">' +
          'Age: <input type="text" ng-model="person.age">' +
          '<md-button ng-click="update(person)">Update user</md-button>' +
          '</md-dialog>',
        controller: TemplateDialogCtrl,
        escapeToClose: true,
        clickOutsideToClose: true
      };
    }
  });

  function TemplateDialogCtrl($scope, $http, $mdDialog, locals) {
    $scope.person = locals.person;

    $scope.update = function(person) {
      $mdDialog.hide(person);
    }
  }
});

app.controller('ctrl', function($scope, $http, $mdDialog) {
  $scope.myobject = {
    'id': 1
  };

  $scope.openDialog = function(myobject, ev) {
    $mdDialog.show(
      $mdDialog.personalInfo({
        locals: {
          person: myobject
        }
      })).then(function(test) {
      $scope.myobject = test;
    });
  }
});

app.controller('ctrlTwo', function($scope, $mdDialog) {
  $scope.myobject = {
    'id': 2
  };

  $scope.openDialog = function(myobject, ev) {
    $mdDialog.show(
      $mdDialog.personalInfo({
        locals: {
          person: myobject
        }
      })).then(function(person) {
      $scope.myobject = person;
    });
  }

});