Opening Modal Dialog In Angular

I'm still new at this, but I'm following a JSBIN that shows how it's done. The problem is that I have the same code, but when I click the button to open the dialog, I get what you

Solution 1:

Use $mdDialog to open a dialog in AngularJS.

Refer to the example below:

//------------------------------------------------------------------------------------
# users-list.tmpl.html
# Refer to the click event ... ng-click="vm.openContact(contact, $event)"

<table md-data-table class="md-data-table" md-progress="vm.deferred">
    <thead md-order="vm.query.contact" md-trigger="vm.getUsers">
        <tr>
            <th name="Email" order-by="email" decend-first></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in vm.users>
            <td width="20%">
                <a style="cursor:pointer" ng-click="vm.openContact(contact, $event)">
                    {{contact.email}}
                </a>
            </td>
        </tr>
    </tbody>
</table>

//------------------------------------------------------------------------------------
# users-list.controller.js
# This is where your click event to open the dialog is 
# i.e. function openContact(contact, $event) {...}
# templateUrl: 'app/foo/admin/users/users-dialog.tmpl.html' below shows the 
# link to the dialog you want to open

(function() {
    'use strict';

    angular
        .module('app.foo.admin')
        .controller('UsersListController', UsersListController);

    /* @ngInject */

    function UsersListController(
        $scope,
        $state,
        $mdDialog) {
        var vm = this;
        vm.loading = false;
        vm.userSvc = userSvc;
        vm.openContact = openContact;

        activate();

        function activate() {
            // init users
            vm.userSvc.get().then(
                function(users) {
                    initSearchString(users);

                    vm.users = users;
                },
                function(error) {
                    $log.error(error);
                }
            );
        }

        function openContact(contact, $event) {
            $mdDialog.show({
                controller: 'UserManagementDialogController',
                controllerAs: 'vm',
                templateUrl: 'app/foo/admin/users/users-dialog.tmpl.html',
                locals: {
                    contact: contact
                },
                targetEvent: $event,
                clickOutsideToClose: true
            });
        }

    }
})();

//----------------------------------------------------------------------------------
# users-dialog.tmpl.html
# Use <md-dialog></md-dialog> to open and close your dialog
# This is the dialog that will open when you click on the link in the table above i.e
# <a style="cursor:pointer" ng-click="vm.openContact(contact, $event)">{{contact.email}}</a>

<md-dialog class="contact-dialog mobile-fullwidth-dialog" flex="60" flex-xs="100">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2 flex >
                <span translate>USER_MANAGEMENT.USER_INFORMATION</span>
            </h2>
            <md-button class="md-icon-button" ng-click="vm.cancelClick()" aria-label="cancel">
                <md-icon md-font-icon="zmdi zmdi-close"></md-icon>
            </md-button>
        </div>
    </md-toolbar>

    <md-dialog-content class="md-dialog-content">

        <div layout="row" layout-xs="column">
          <div flex="50" flex-xs="100" layout="row" class="margin-bottom-30">
              <div flex="5">
                  <md-icon md-font-icon="zmdi zmdi-email" style="color:#47B2E8"></md-icon>
              </div>
              <div flex="25">
                  <label for="email" translate>USER_MANAGEMENT.EMAIL.LABEL</label> :
              </div>
              <div flex>
                  <span>{{vm.contact.email}}</span>
              </div>
          </div>
        </div>

    </md-dialog-content>

    <md-dialog-actions class="user-management-card-footer" layout="row">
        <span flex></span>
        <md-button
            class="md-raised md-primary margin-left-0"
            ng-click="vm.okClick()"
            aria-label="{{USER_MANAGEMENT.BUTTON_OK | translate}}"
            translate="USER_MANAGEMENT.BUTTON_OK">
        </md-button>
    </md-dialog-actions>
</md-dialog>

//----------------------------------------------------------------------------------
# users-dialog.controller.js
# Note how we inject 'contact' below so that your data will be injected from the
# users-list.controller.js .... locals: { contact: contact } to this 
# users-dialog.controller.js .... vm.contact = contact;

(function() {
    'use strict';

    angular
        .module('app.lms.admin')
        .controller('UserManagementDialogController', UserManagementDialogController);

    /* @ngInject */
    function UserManagementDialogController(
        $window,
        $mdDialog,
        $log,
        contact) {
        var vm = this;
        vm.cancelClick = cancelClick;
        vm.okClick = okClick;
        vm.contact = contact;
        vm.printClick = printClick;

        function okClick() {
            $mdDialog.hide();
        }

        function cancelClick() {
            $mdDialog.cancel();
        }

        function printClick() {
            $window.print();
        }
    }
})();

//----------------------------------------------------------------------------------