如何从AngularJS Bootstrap模式中的AJAX调用加载JSON数据

Question

我想创建以下内容.有一个按钮,当点击时打开一个对话框/模态从Angular Bootstrap [1然后将显示一个加载指示器,当应用程序从服务器获取json数据,然后将该数据显示在对话框内容中.

我想我会创建一个对话框模板,其中包含json数据的解析代码,例如,某些ng-repeat将其显示为列表.

我不清楚:

1. 我在这个过程中添加一个加载指示器(比如说spin.js).我希望能够从我假设的控制器中引用对话框模板中的一些div？
2. 我什么时候进行ajax调用
3. 如何将该数据传递给模板并对其进行解析

Answer 1

无需手动将模板加载到对话框中.$dialogAngularUI 的服务接受静态模板或模板URL.该URL可以返回任何内容,它只是GET通过AJAX调用执行请求,并使用返回的任何数据填充对话框.该请求在本地缓存,因此下一次调用应该比第一次调用快.

这是一个简单的片段,可以帮助您入门:

使用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;
            });
    });

主要HTML

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

查看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>

这个Plunker脚本演示了上述所有内容.

更新:我已更新示例代码,以演示如何动态更改对话框内容.