### 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')
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

.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.