Question

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

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

我不清楚：

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

Answer 1

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

这是一个简单的代码片段，可以帮助您入门：

<强>的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 script演示了以上所有内容。

更新：我已更新示例代码，以演示如何动态更改对话框内容。

Answer 2

“modal是一个重用$ dialog服务来提供简单的指令   创建已经在你的DOM中的模态，没有麻烦   创建部分视图和控制器。

该指令共享$ dialog全局选项。“

检查下面的bootstrap对话框选项是url：

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

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

2 个答案: