将jquery + Bootstrap模态对话框div更改为BootStrap + angularjs

Question

I have multiple bootstrap dialog divs in one single jsp.

Dialog divs look like below

<div id="manage-notes-dialog" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="about">NOTES <input name="backButton" type="button" value="&#8666; " class="btn btn-primary pull-right" /></h3>
        </div>
        <div class="modal-body">
            .......UI HTML.........
            .......UI HTML.........
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

In my jquery button clicks I was opening the dialogs as below

$("#manage-notes-dialog").modal('show');

Above command being part of jquery click action for button

I am changing my UI handling from jQuery to angularjs.

After writing the angularjs controller and testing it I wrote below code to open the above dialogs.

$scope.openNotes = function() {
    $("#manage-notes-dialog").modal('show');
};

This still not completely using angularjs as $("#manage-notes-dialog").modal('show'); is still jQuery and stops when I remove the jquery js.

I wanted to know if I can have the bootstrap modal dialogs opened through angularjs. I want to avoid to re-write all modal dialog from scratch while using angularjs as a lot of data is being loaded via JSTL. I am pretty new to angularjs And doing what has been said in this “Thinking in AngularJS” if I have a jQuery background? not that simple

Please suggest possible workaround/solution steps. Most of the solution/examples I have found are completely using angularjs modal directive. or individual html.

My constraint is that I want to keep all the dialogs in one single jsp as they would be common to multiple UI pages

Answer 1

I went by what Matthew Green suggested in his comment . Using ng-template I generated div and loaded it via angularjs uibModal open call. Wrote a separate controller dialogController which will handle all actions and scope variable and actions used by my Modal div.

Below is the javascript call I used to open the div from the template cache.

var modalInstance = $uibModal.open({
                              templateUrl: 'error-dialog',
                              controller: 'dialogController',
                              scope: $scope,
                              resolve: {                   
                                  msg: function(){
                                  return 'ErrorMessage for DIsplay';
                                }
                            }
                    });

The div element inside the javascript looks below

<script type="text/ng-template" id="error-dialog">
            <div class="modal-body alert-danger">
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal" ng-click="close()">&#10539;</button>
                <pre class="alert-danger" style="border:0px;">{{msg}}</pre>
            </div>
</script>

And finally the controller

.controller('dialogController', [ '$scope','msg','$uibModalInstance' ,function($scope, msg,$uibModalInstance) {
    $scope.msg = msg;
    $scope.close = function() {
         $uibModalInstance.dismiss('cancel');
        };
} ])