How to load JSON data from an AJAX call in AngularJS Bootstrap modal [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

I would like to create the following. Have a button that when clicked opens a dialog/modal from Angular Bootstrap[1 which will then display a loading indicator while the app fetches json data from the server then have that data be presented in the dialog content.

I am thinking that I would make a dialog template which has the parsing code for the json data i.e. some ng-repeat to present it as a list for example.

I am unclear as to:

1. Where in the process do I add a load indicator (let's say spin.js). I'd want to be able to refer to some div inside the dialog template from the controller I assume?
2. At what point do I make my ajax call
3. How to pass that data to the template and have it parsed

Answer 1

There's no need to manually load the template into the dialog. The $dialog service from AngularUI accepts both a static template or a template url. That URL can return anything, it'll just perform a GET request via an AJAX call and fill the dialog with whatever data is returned. That request is cached locally so that next calls are supposed to be faster than the first one.

Here's a simple snippet to get you started:

Javascript

angular.module('app', ['ui.bootstrap.dialog'])
    .controller('Ctrl', function($scope, $dialog, $window) {
        $scope.open = function() {
            var options = {
                backdrop: true,
                keyboard: true,                    
                controller: 'DialogCtrl', // the dialog object will be inject 
                                          // into it
                templateUrl: 'path/to/view' // can be either a static file or 
                                            // a service that returns some data
            };
            var dialog = $dialog.dialog(options);
            dialog.open().then(function(result) {
                if (result === 0) {
                    $window.alert("Cancel pressed");
                }
                else if (result === 1) {
                    $window.alert("OK pressed");
                }
            });
        };
    })
    .controller('DialogCtrl', function($scope, $http, dialog) {
        // Here you can put whatever behavior the dialog might have
        $scope.close = function(result) {
            dialog.close(result);
        };

        // Loads some data into the dialog scope
        $http.get('/path/to/service')
            .success(function(response) {
                $scope.items = response;
            });
    });

Main HTML

<div ng-app="app" ng-controller="Ctrl">
  <button ng-click="open()">Open dialog</button>
</div>

View HTML

<div class="modal-header">
  <h3>Title</h3>
</div>
<div class="modal-body">
  <!-- Renders the data loaded by the controller -->
  <p ng-repeat="item in items">{{ item }}</p>
</div>
<div class="modal-footer">
  <button class="btn" ng-click="close(0)">Cancel</button>
  <button class="btn btn-primary" ng-click="close(1)">OK</button>
</div>

This Plunker script demonstrates all of the above.

Update: I've updated the example code in order to demonstrate how you can dynamically change the dialog box content.

Answer 2

"modal is a directive that reuses $dialog service to provide simple creation of modals that are already in your DOM without the hassle of creating partial views and controllers.

The directive shares $dialog global options."

Check the bootstrap dialog options below is the url :

http://angular-ui.github.io/bootstrap/#/dialog