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)"

<tablemd-data-tableclass="md-data-table"md-progress="vm.deferred"><theadmd-order="vm.query.contact"md-trigger="vm.getUsers"><tr><thname="Email"order-by="email"decend-first></th></tr></thead><tbody><trng-repeat="contact in vm.users>
            <td width="20%"><astyle="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
# <astyle="cursor:pointer"ng-click="vm.openContact(contact, $event)">{{contact.email}}</a><md-dialogclass="contact-dialog mobile-fullwidth-dialog"flex="60"flex-xs="100"><md-toolbar><divclass="md-toolbar-tools"><h2flex ><spantranslate>USER_MANAGEMENT.USER_INFORMATION</span></h2><md-buttonclass="md-icon-button"ng-click="vm.cancelClick()"aria-label="cancel"><md-iconmd-font-icon="zmdi zmdi-close"></md-icon></md-button></div></md-toolbar><md-dialog-contentclass="md-dialog-content"><divlayout="row"layout-xs="column"><divflex="50"flex-xs="100"layout="row"class="margin-bottom-30"><divflex="5"><md-iconmd-font-icon="zmdi zmdi-email"style="color:#47B2E8"></md-icon></div><divflex="25"><labelfor="email"translate>USER_MANAGEMENT.EMAIL.LABEL</label> :
              </div><divflex><span>{{vm.contact.email}}</span></div></div></div></md-dialog-content><md-dialog-actionsclass="user-management-card-footer"layout="row"><spanflex></span><md-buttonclass="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();
        }
    }
})();

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