User Rating: 4 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Inactive

Dialog boxes (AKA: Modals) Are an integral part of UI and UX design. Unfortunately, they can make your code messy when you have to deal with a large number of them and most libraries that provide easy to use dialog boxes do not always make it obvious how to make them more reusable. Below I will provide an example and explanation of using Angular Material's dialog service in a factory to have a single instantiator for all of your dialog needs. 

You can find the documentation for angular-material project here.

You can find more documentation on AngularJS here.

I won't go over installing Angular and Material, if you are familiar with Bower or NPM you can easily retrieve the packages.


Let's get started Shall we?

You can play around with this plunker I created:

First we need to create a module and inject angular-material as a dependecy. 
We can do this in angular very simply: 

angular.module('app', [ 'ngMaterial'])

Next, in our index.html we need to add ng-app="app" to our <html> tag.

Let's create our main controller in script.js, we can place this underneath our angular.module.

angular.module('app', [ 'ngMaterial'])
.controller('MainCtrl', ['$scope', function ($scope) { }]);

Now that we have our main controller set, let's add our button to our index.html file which will open our dialog.

<body ng-controller="MainCtrl">
  <md-button ng-click="openDialog()">Test</md-button>

Now back to our script.js, we need to create a scope variable called openDialog and set equal to a function

We place this within our MainCtrl:

.controller('MainCtrl', ['$scope', 'Dialog', function ($scope, Dialog) {
  $scope.openDialog = function () {

Before this will work we need to setup our DialogFactory which will be used to instantiate our dialog. We can place this right below our controller in script.js for this small example. In a larger project you would want to separate these in different files.

.factory('Dialog', ['$mdDialog', function DialogFactory ($mdDialog) {
  return {
    open: function (url, ctrl, locals) {
      return ${
        templateUrl: url,
        controller: ctrl,
        locals: {
          items: locals

So, what does this factory do exactly? What we are doing here is returning a key with a value of a function which returns the $mdDialog service. We pass our url for the template, the controller for the dialog, and any variables we may need in an array called locals and set them equal to items.

now back to our MainCtrl, we need to inject and use our newly created factory.

.controller('MainCtrl', ['$scope', 'Dialog', function ($scope, Dialog) {
  $scope.openDialog = function () {
    var url = 'dialogtemplate.html',
    ctrl = 'DialogCtrl',
    locals = [], ctrl, locals);

We simply set the url and template to what we need, and finally the locals. In this case we don't have any. Then we call the open function on the Dialog factory.
And there you have it, a fully reusable $mdDialog service.

Advertise here

Advertise on our website.
Find out more, mail us here.