Modal Service

[Hamatek]

I noticed there is a modal service in the latest version of the generator, but i couldn't find any example to see how to use it, I mean what should I I do once I call the modal service in my controller ?

Is there anyone kind enough to give me an explanation regarding this new service and how to use it ?

Cheers

[kingcody]

@Hamatek it goes like this:

client/app/admin/admin.controller.js

angular.module('accountstaffersApp')
  .controller('AdminCtrl', function ($scope, User, Modal, currentAdmin) {

    // Use the User $resource to fetch all users
    $scope.users = User.query({
      exclude: currentAdmin._id
    });

    // Modal.confirm.delete returns a function that will open a modal when ran
    // We use closure to define the callback for the modal's confirm action here in the controller
    $scope.delete = Modal.confirm.delete(function(user) { // callback when modal is confirmed
      User.remove({ id: user._id });
      angular.forEach($scope.users, function(u, i) {
        if (u === user) {
          $scope.users.splice(i, 1);
        }
      });
    });

  });

client/app/admin/admin.jade

div(ng-include='"components/navbar/navbar.html"')
.container
  p
    | The delete user and user index api routes are restricted to users with the 'admin' role.
  ul.list-group
    li.list-group-item(ng-repeat='user in users')
      strong {{user.name}}
      br
      span.text-muted {{user.email}}
      //- first argument is what will be displayed as name in delete modal
      //- additional args are passed to the callback defined in the controller
      a.trash(ng-click='delete(user.name, user)')
        span.glyphicon.glyphicon-trash.pull-right

[xBlazeTECH]

Please don't make fun of me, but to use the modal do I just replace the contents of the file with the text above? 👍

[kingcody]

You can... If you would like to have a confirm delete modal opened when you attempt to delete a user from /admin.

[kingcody]

@Hamatek take a look at the comments in the code above, let me know if I should elaborate further on a particular section.

[Hamatek]

@kingcody, Thanks you for your help, I wouldn't mind an easier example like "hello word" modal with a html page rather than jade, but i think I got it. Thank you.

Will this be in the default setup of the generator ?

[kingcody]

@Hamatek thank you for the feedback, I'll try to get some documentation together. I'll link it here for you when I do.

As far as it being included as default, I can not say.

[camwhite]

I'm looking for a way to launch the modal with a different functionality, a window to post to the database. I'm sure it's possible, but I'm I can't get it working. Any help would be appreciated!

[kingcody]

@camwhite could you be a little more specific on the details of your post action? Will the post occur while the modal is open or directly following the modal's dismissal?

[camwhite]

@kingcody I would be open to either solution, but preferably post on dismissal.

[TWKDreamState]

I'm trying to implement the modal dialog but I'm struggling a bit as I'm fairly new to Angular.

I'd like to have a simple information modal dialog with a single button. I would like to pass in the title and body text from the controller that opens it. I've got this working but I can't work out how to use the callback or return a promise. I'd like to do something only after the user has clicked the button.

What would be the best way to achieve this?

[honkskillet]

For all who are struggling, as a relative angular newbie this is how I got the service to work. I wanted a modal that would ask me to login if I tried to do a certain task. Inside my controller, I used the angular-fullstack modal service to construct a function that I can call at my pleasing.

      $scope.modal=Modal.confirm.askToLogin(function(message) { // callback when modal is confirmed
        $location.path("/login"); //will redirect to login page, make sure your controller is using $location
      });

Now, whenever I please, I can call this function as follows..

$scope.modal("follow");

But for this to work I have to add askToLogin to the "API" in the modal service. In modal.service.js I added

// Public API here
return {
  /* Confirmation modals */
  confirm: {
    delete: function(del) {
      //this is the example provided
    },
    askToLogin: function(cb) { //my new modal
      cb = cb || angular.noop;
      return function() {
        var args = Array.prototype.slice.call(arguments),
            name = args.shift(),
            theModal;
        theModal = openModal({ //openModal is a function the modal service defines.  It is just a wrapper for $Modal
          modal: {
            dismissable: true,
            title: 'Login',
            html: '<p>In order to complete the <strong>' + name + '</strong> action you must login.</p>', //set the modal message here, name is the parameter we passed in
            buttons: [ {//this is where you define you buttons and their appearances
              classes: 'btn-warning',
              text: 'Cancel',
              click: function(event) {
                theModal.dismiss(event);
              }
            },{
              classes: 'btn-primary',
              text: 'Login',
              click: function(event) {
                theModal.close(event);
              }
            },]
          }
        }, 'modal-primary');
        theModal.result.then(function(event) {
          cb.apply(event, args); //this is where all callback is actually called
        });
      };
    }

[LunarDevelopment]

Hello!

I've followed honkskillet example and have mutated it into my own means. I pass an obj to the modal which is then edited in the modal body via form fields (nothing out the usual as im just binding the obj via traditional ng-model="modal.obj.key" .)

But where I'm struggling is getting that object back from the modal to the controller to then manipulate it in my controller's scope.

I hope someone can help.

Thanks.

Code below for anyone interested:
Controller:

        $scope.modal = Modal.confirm.newMailer(function (message) { 
            // callback when modal is confirmed
            console.log(message); 
            //Change this code to restangular insert mailer (needs made) 
        }, {hello:"world"});

Modal function:

newMailer: function (cb, newMailerObj ) { //my new modal
                    cb = cb || angular.noop;
                    return function () {
                        var args = Array.prototype.slice.call(arguments),
                            name = args.shift(),
                            theModal;
                        theModal = openModal({ 
                            //openModal is a function the modal service defines.  It is just a wrapper for $Modal
                            modal: {
                                dismissable: true,
                                title: 'Login',
                                text: 'Login',
                                newMailerObj: newMailerObj,
                                buttons: [{ 
                                    //this is where you define you buttons and their appearances
                                    classes: 'btn-warning',
                                    text: 'Cancel',
                                    click: function (event) {
                                        theModal.dismiss(event);
                                    }
            }, {
                                    classes: 'btn-primary',
                                    text: 'Create',
                                    click: function (event) {
                                        theModal.close(event);
                                    }
            }, ]
                            }
                        }, 'modal-danger', 'components/modal/newMailerModal.html');
                        theModal.result.then(function (event) {
                            cb.apply(event, args); //this is where all callback is actually called
                        });
                    };
                }

[LunarDevelopment]

Never mind, I've sorted it, I found where I could pass the scope object back from modal to controller.

Modal html:

<input ng-model="modal.newMailerObj.hello" /> // just to manipulate the obj in modal scope 

modal factory

newMailer: function (cb, newMailerObj ) { //my new modal
                    cb = cb || angular.noop;
                    return function () {
                        var args = Array.prototype.slice.call(arguments),
                            name = args.shift(),
                            theModal;
                        theModal = openModal({ 
                            //openModal is a function the modal service defines.  It is just a wrapper for $Modal
                            modal: {
                                dismissable: true,
                                title: 'Login',
                                text: 'Login',
                                newMailerObj: newMailerObj,
                                buttons: [{ 
                                    //this is where you define you buttons and their appearances
                                    classes: 'btn-warning',
                                    text: 'Cancel',
                                    click: function (event) {
                                        theModal.dismiss(event);
                                    }
            }, {
                                    classes: 'btn-primary',
                                    text: 'Create',
                                    click: function (event) {
                                        theModal.close(event);
                                    }
            }, ]
                            }
                        }, 'modal-danger', 'components/modal/newMailerModal.html');
                        theModal.result.then(function (event) {
                            //cb.apply(event, args); //this is where all callback is actually called
// this was the issue as I just needed to pass my declared object back to the callback <cb> 
                            cb(newMailerObj);
                        });
                    };
                }

controller

$scope.modal = Modal.confirm.newMailer(function (message) { 
            // callback when modal is confirmed
            console.log(message); 
            //Change this code to restangular insert mailer (needs made) 
        }, {hello:"world"});