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

Question

I would like to create the following. You have a button that, when clicked, opens a dialog / modal file from Angular Bootstrap [1], which then displays a download indicator when the application retrieves json data from the server, then this data will be presented in the contents of the dialog.

I think I will make a dialog template that has parsing code for json data, i.e. some ng-repeat to present it as a list, for example.

This is unclear:

• In this process, add a loading indicator (say spin.js). I would like to be able to reference any div inside the dialog template from the controller, which I assume?
• At what point do I make my ajax call
• How to transfer this data to a template and analyze it

Answer 1

There is no need to manually load the template into the dialog. The $dialog from AngularUI accepts both a static template and a template. This url can return anything, it just executes a GET request through an AJAX call and populates the dialog with any returned data. This request is cached locally, so subsequent calls should be faster than the first.

Here is 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; }); }); 

Basic HTML

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

HTML view

 <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 updated the sample code to demonstrate how you can dynamically change the contents of a dialog box.

Answer 2

"modal is a directive that reuses $ dialog service to make it easy to create modals that are already in your DOM, without the hassle of creating partial views and controllers.

The directive separates the global parameters of $ dialog. "

Check bootstrap dialog box options below: url:

http://angular-ui.imtqy.com/bootstrap/#/dialog