Passing Data to (and from) a Modal Popup in Angular

Success! Perhaps naïve and a bit crude, but it is something that seems to work so far.

As part of playing with StrongLoop's Loopback framework, I am also beginning to learn about Angular via Loopback's examples. Today, I ran into needing to do something pretty basic in Angular, and it seems to be a bit harder to do than I expected... at least to someone very new to it.

The feature in question is the ability to pass parameters/info into a modal popup. The scenario is when you have a list of stuff, and you want to show a popup when the user clicks on one of the elements in the list, say for a confirm delete or something.

Anyone who has a list of stuff the user will interact with will need this feature, and so that's why it surprised me that it wasn't quite as straightforward as I anticipated.

Well, not straightforward to someone as new to Angular as myself.

So, below are the basics on one way that works - not a complete example, but this is kind of a "fresh note from the field", and may help someone nevertheless. It is based on Angular's sample on using the ui.bootstrap.modal functionality, and this stackoverflow post.

Here are the pieces:

  • Angular (of course)
  • Bootstrap
  • UI Bootstrap - Bootstrap components from the AngularUI Team
  • You have an html list where each row has some attributes unique for a row (id, etc.); here is a snippet in Jade syntax (N.B. The diminished clutter of writing and reading Jade for html is a pleasure, imo):
    
      tr(ng-repeat="file in files")
        td
          strong
          | {{file.originalFileName }}
        td
          button(ng-click="openConfirmDelete(file.originalFileName, file.id)",title="Delete")
          | Delete
    
    A basic list of stuff (Jade syntax)
    We want a styled popup specific to the row clicked

  • In your html file, define a script defining a template for the modal popup - here is a stripped-down one (yes, that's "raw" html inside the script tag):
    
      script#myModalContent(type='text/ng-template')
        .modal-header
          h3.modal-title Delete File {{name}}?
        .modal-footer
          button(ng-click="cancel()") Cancel
          button(ng-click="doDelete()") Yes, Delete File
    
    
    Defining the script "template" for the popup for Angular

  • In your controller js file, make sure and include 'ui.bootstrap", a la
    
       angular.module('app', ['angularFileUpload','ui.bootstrap'])
          .controller(...
    
    Referencing the UI Bootstrap stuff
    so it can be used

  • In the controller javascript (and I am assuming this is in definition of the controller that is used for the list), define the controller for the popup:
    
      var PopUpController = function($scope, $modalInstance, name,id) {
       
        $scope.name = name;
        $scope.doDelete = function() {  // this is the function called when the user 
                                        //  user clicks the "Yes Delete File" button              
          $modalInstance.close({doDelete:true, id:id}); //this gets passed back to 
                                                        // the code that created the popup
        };
        $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
        };
      };
    
    Defining the controller for the modal confirmation popup

  • In the relevant controller for the list, define the function openConfirmDelete that will make use of both the script template and the PopUpController:
    
      ...).controller('FilesController', 
            function ($scope, $http, $modal) {
              $scope.openConfirmDelete = function (name,id) {
                 var modalInstance = $modal.open({
                                        templateUrl: 'myModalContent',
                                        controller: PopUpController,
                                        resolve: {
                                          name: function() {return name;}
                                          id: function () {return id;}
                                        }
                                     });
                                   });
    
                  modalInstance.result.then(function (opts) {
                      if (opts.doDelete === true) {
                            //you are now free to deal with the file/whatever,
                            //   as you will be able to get the id from opts.id
                            //  e.g, delete(opts.id);
                            // Note: as "id" is in a closure, I'm not sure it
                            //         is necessary to pass it back here, but
                            //         this shows how to pass anything back
                      }
                    }, 
                     function () {console.log('Modal dismissed at: ' + new Date());}
                  }); // modalInstance.result
              }; // openConfirmDelete
            ...
            ...
            }); //FilesController...
    
  • The final piece: creating the popup when
    the user clicks the "Delete" button on an item in the list

Whew.

Popular Posts