4

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

我在想我会制作一个对话框模板，其中包含 json 数据的解析代码，例如，一些 ng-repeat 以将其呈现为列表。

我不清楚：

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

2 回答 2

5

无需手动将模板加载到对话框中。$dialog来自 AngularUI的服务接受静态模板或模板 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 脚本演示了以上所有内容。

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

于 2013-08-11T06:10:22.007 回答
0

“modal 是一个指令，它重用 $dialog 服务来提供简单的模式创建，这些模式已经在你的 DOM 中，而无需创建部分视图和控制器。

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

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

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

于 2013-08-11T06:11:49.027 回答