How to pass parameters to a modal

Question

I want to pass the userName from a list of userNames a logged in user clicks on to twitter bootstrap modal  I am using grails with angularjs  where data is rendered via angularjs   Configuration  My grails view page encouragement gsp is    lt div ng-controller  EncouragementController  gt       lt g render template  encourage encouragement modal    gt       lt tr ng-cloak                   ng-repeat  user in result users  gt                      lt td gt   user userName   lt  rd gt                      lt td gt                         lt a class  btn btn-primary span11  href   encouragementModal  data-toggle  modal  gt                              Encourage                         lt  a gt                     lt  td gt                   lt  tr gt     My encourage  encouragement modal gsp is    lt div id  encouragementModal  class  modal hide fade  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal        aria-hidden  true  gt  amp times  lt  button gt       lt h3 gt Confirm encouragement  lt  h3 gt     lt  div gt     lt div class  modal-body  gt        Do you really want to encourage  lt b gt   aModel userName   lt  b gt      lt  div gt     lt div class  modal-footer  gt       lt button class  btn btn-info        ng-click  encourage    createLink uri    encourage        aModel userName     gt        Confirm      lt  button gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Never Mind lt  button gt     lt  div gt   lt  div gt    So  how can I pass userName to encouragementModal

User · Answer

You should really use Angular UI for that needs. Check it out: Angular UI Dialog

In a nutshell, with Angular UI dialog, you can pass variable from a controller to the dialog controller using resolve. Here's your "from" controller:

var d = $dialog.dialog({
  backdrop: true,
  keyboard: true,
  backdropClick: true,
  templateUrl:  '<url_of_your_template>',
  controller: 'MyDialogCtrl',
  // Interesting stuff here.
  resolve: {
    username: 'foo'
  }
});

d.open();

And in your dialog controller:

angular.module('mymodule')
  .controller('MyDialogCtrl', function ($scope, username) {
  // Here, username is 'foo'
  $scope.username = username;
}

EDIT: Since the new version of the ui-dialog, the resolve entry becomes:

resolve: { username: function () { return 'foo'; } }

User · Answer

I tried as below   I called ng-click to angularjs controller on Encourage button                    lt tr ng-cloak                   ng-repeat  user in result users  gt                      lt td gt   user userName   lt  rd gt                      lt td gt                         lt a class  btn btn-primary span11  ng-click  setUsername   user userName     href   encouragementModal  data-toggle  modal  gt                              Encourage                         lt  a gt                     lt  td gt                   lt  tr gt    I set userName of encouragementModal from angularjs controller                  Encouragement controller for AngularJS                 param  scope         param  http         param encouragementService             function EncouragementController  scope   http  encouragementService                       set invoice number                  scope setUsername   function  username                 scope userName   username                      EncouragementController  inject       scope     http    encouragementService       I provided a place userName  to get value from angularjs controller on encouragementModal    lt div id  encouragementModal  class  modal hide fade  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal        aria-hidden  true  gt  amp times  lt  button gt       lt h3 gt Confirm encouragement  lt  h3 gt     lt  div gt     lt div class  modal-body  gt        Do you really want to encourage  lt b gt   userName   lt  b gt      lt  div gt     lt div class  modal-footer  gt       lt button class  btn btn-info        ng-click  encourage    createLink uri    encourage        userName     gt        Confirm      lt  button gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Never Mind lt  button gt     lt  div gt   lt  div gt    It worked and I saluted myself

User · Answer

You can also easily pass parameters to modal controller by added a new property with instance of modal and get it to modal controller  For example   Following is my click event on which i want to open modal view     scope openMyModalView   function                 var modalInstance    modal open                       templateUrl   app userDetailView html                       controller   UserDetailCtrl as userDetail                                         add your parameter with modal instance                 modalInstance userName    xyz                Modal Controller   angular module  myApp   controller  UserDetailCtrl      modalInstance                   function   modalInstance                           get your parameter from modal instance                     var currentUser    modalInstance userName                         do your work

User · Answer

To pass the parameter you need to use resolve and inject the items in controller   scope Edit   function  Id       var modalInstance    modal open         templateUrl    app views admin addeditphone html         controller   EditCtrl         resolve             editId  function                 return Id                                  Now if you will use like this   app controller  EditCtrl      scope     location           function   scope   location  editId    in this case editId will be undefined  You need to inject it  like this   app controller  EditCtrl      scope     location    editId         function   scope   location  editId    Now it will work smooth  I face the same problem many time  once injected  everything start working

User · Answer

You can simply create a controller funciton and pass your parameters with the  scope object    scope Edit   function  modalParam    var modalInstance    modal open         templateUrl    app views admin addeditphone html         controller  function  scope             scope modalParam   modalParam

User · Answer

Alternatively you can create a new scope and pass through params via the scope option  var scope    rootScope  new     scope params    editId   scope editId        modal open           scope  scope          templateUrl   template html           controller   Controller             In your modal controller pass in  scope  you then do not need to pass in and itemsProvider or what ever resolve you named it  modalController   function  scope        console log  scope params

User · Answer

If you re not using AngularJS UI Bootstrap  here s how I did it   I created a directive that will hold that entire element of your modal  and recompile the element to inject your scope into it   angular module  yourApp        directive  myModal             rootScope    log    compile   function  rootScope    log    compile        var  scope   null      var  element   null      var  onModalShow   function event             element after  compile event target   scope                return           link  function scope  element  attributes                 scope   scope               element   element                element  on  show bs modal   onModalShow                           I m assuming your modal template is inside the scope of your controller  then add directive my-modal to your template   If you saved the clicked user to  scope aModel  the original template will now work   Note  The entire scope is now visible to your modal so you can also access  scope users in it    lt div my-modal id  encouragementModal  class  modal hide fade  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal        aria-hidden  true  gt  amp times  lt  button gt       lt h3 gt Confirm encouragement  lt  h3 gt     lt  div gt     lt div class  modal-body  gt        Do you really want to encourage  lt b gt   aModel userName   lt  b gt      lt  div gt     lt div class  modal-footer  gt       lt button class  btn btn-info        ng-click  encourage    createLink uri    encourage        aModel userName     gt        Confirm      lt  button gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Never Mind lt  button gt     lt  div gt   lt  div gt

User · Answer

The other one doesn t work  According to the docs this is the way you should do it    angular module  plunker     ui bootstrap     var ModalDemoCtrl   function   scope   modal         var modalInstance    modal open         templateUrl   myModalContent html         controller  ModalInstanceCtrl        resolve            test  function                return  test variable                                 var ModalInstanceCtrl   function   scope   modalInstance  test        scope test   test       See plunkr

[javascript] How to pass parameters to a modal?

Examples related to javascript

Examples related to twitter-bootstrap

Examples related to grails

Examples related to angularjs