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

<div ng-controller="EncouragementController">     <g:render template="encourage/encouragement_modal" />     <tr ng-cloak                   ng-repeat="user in result.users">                    <td>{{user.userName}}</rd>                    <td>                       <a class="btn btn-primary span11" href="#encouragementModal" data-toggle="modal">                             Encourage                        </a>                   </td>                 </tr> 

My encourage/_encouragement_modal.gsp is

<div id="encouragementModal" class="modal hide fade">   <div class="modal-header">     <button type="button" class="close" data-dismiss="modal"       aria-hidden="true">&times;</button>     <h3>Confirm encouragement?</h3>   </div>   <div class="modal-body">       Do you really want to encourage <b>{{aModel.userName}}</b>?   </div>   <div class="modal-footer">     <button class="btn btn-info"       ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">       Confirm     </button>     <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>   </div> </div> 

So, how can I pass userName to encouragementModal?

Answer 1

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!

Answer 2

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