0

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

Community
  • 1
  • 1
Acewin
  • 1,657
  • 4
  • 17
  • 36
  • 2
    Use the actual directives built in angular: http://angular-ui.github.io/bootstrap/ – Matthew Green Nov 17 '16 at 20:04
  • yes. I can. But first I want to understand if I can work without switching the completely to this directive. If there is any workaround. Because I am setting some data dynamically through the ng-click action – Acewin Nov 17 '16 at 20:11
  • Question is how will I modify the data inside these divs if I moved them to script. A lot of data loading inside the divs are through jstl. – Acewin Nov 17 '16 at 20:16
  • That's not the question you asked above. If that's really what you are going for then you would be best served in updating your question with the actual issue you are having? – Matthew Green Nov 17 '16 at 21:27
  • Updated the question to make my point where I had mentioned I want to avoid rewrite the modal dialogs. Using the angularjs directives means I will have to update most of the code. – Acewin Nov 17 '16 at 21:55
  • You don't have to rewrite the modal dialogs. That's the point of that library. The html should be identical. The only change is using AngularJs instead of JQuery, which seems to be your exact question. You can't remove JQuery completely and not rewrite large portions of your code around that. Again, unless you have something more compelling to show (like your js code) then I'm not sure your question is very clear. – Matthew Green Nov 17 '16 at 22:18
  • I will try to update my div elements, and yeah I concur to the point on removing jQuery completely being a big change. – Acewin Nov 17 '16 at 22:21
  • 1
    @MatthewGreen went with your first suggestion, which was actually much simpler as solution and I actually avoided re-writing my divs, I only had to encapsulate the div inside a script tag using ng-template to have it loaded in the template cache. – Acewin Mar 23 '17 at 21:20

1 Answers1

0

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');
        };
} ])
Acewin
  • 1,657
  • 4
  • 17
  • 36