Bootstrap Modal on clicking a link on UI Grid

Question

In my UI Grid here are the Column Defs in my myController.js file:

    { field: 'trans_typ_dsc', headerTooltip: 'Transaction Type Description', displayName: 'Transaction Type Description', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' },
    { field: 'trans_stat', displayName: 'Transaction Status' },
    { field: 'sub_trans_actn_typ', displayName: 'Sub Transaction Action Type', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' , visible : false },
    { field: 'case_key', displayName: 'Case Key', visible: true, celltemplate: '<a class="text-center" ng-href="#" ng-click="grid.appScope.setAssociateCaseModal(row)">{{COL_FIELD}}</a>' },
    { field: 'approved_by', displayName: 'Approved By', visible: false }

Here on clicking the case_key link a UI Bootstrap modal should pop up .

How to do that ?

I know in a html file using a button click it is something like :

            <h3>Search Transaction</h3>
            <div style="float: right; margin-top: -35px"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#recentSearchesModal">Recent Searches</button></div>
        </div>

        <div class="modal fade" id="recentSearchesModal" role="dialog">
            <div class="modal-dialog">

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Recent Searches</h4>
                    </div>
                    <div class="modal-body">

                        <div class="panel panel-default">

                            <div class="menu_simple" ng-repeat="obj in CaseRecentSearches" style="padding:8px;">
                                <ul>
                                    <li>
                                        <a href="#" ng-click="TransactionRecentSearch(obj)" ng-model="obj"> {{obj | placeholderfunc}} </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>

But here the click event is my controller.js file then how to get the modal opened ?

Answer 1

You need to modify the field's cellTemplate and then call grid.appScope.openModal(). openModal should live in your main controller under $scope.openModal. Do it like this:

Your template:

var myTemplate = "<a href='#' ng-click='grid.appScope.openModal($event, row)'>{{ row.entity.myFieldName }}</a>";

Use the template in gridOptions.

$scope.gridOptions = {
    columnDefs: [{
        field: 'myFieldName',
        displayName: 'My Field Name',
        cellTemplate: myTemplate;
    }]
};

Function to call modal:

$scope.openModal = function (e, row) {
    //in here, you can access the event object and row object
    var myEvent = e;
    var myRow = row;

    //this is how you open a modal
    var modalInstance = $uibModal.open({
        templateUrl: '/path/to/modalTemplate.html',
        controller: MyModalCtrl,
        backdrop: 'static'
        //disable the keyboard
        //keyboard: false,
        resolve {
            //pass variables to the MyModalCtrl here
            event: function() { return myEvent; },
            row: function() { return myRow; }
        }
    });

    //call the modal to open, then decide what to do with the promise
    modalInstance.result.then(function() {
        //blah blah the user clicked okay
    },function(){
        //blah blah the user clicked cancel
    })
}