javascript - Angular 模块弹出窗口 : How to obtain data from Ajax/Json

Question

我主要是要打开一个基于模板的 Angular 弹出窗口。但是我需要从 ajax 调用中获取数据。

The Module sample解释了如何使用模板，但我很困惑在哪里放置 ajax 调用来获取项目，如下所示(代码段不起作用，但与 sample 相同):

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
    function($scope, $uibModal, $log) {

      //
      // need to obtain these items from an AJAX/GET call
      //
      $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function(size) {
          var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return $scope.items;
              }
            }
          });

<div ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">...</div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">...</li>
      </ul>
    </div>
    <div class="modal-footer">...</div>
  </script>

  <button type="button" ng-click="open()">Open me!</button>

</div>

我有一个返回 JSON 数据的链接，我会像这样修改函数:

      $scope.open = function(size, jsonLink) {
          var modalInstance = $uibModal.open({

            // ?????
            templateJsonUrl: jsonLink,
            // ?????

            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return $scope.items;
              }
            }
          });

Answer 1

只需使用 http 服务发出请求，并在解析时将结果分配给 $scope.items。摘要循环将进行绑定(bind)。不要忘记注入(inject) http 服务本身。

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
    function($scope, $http, $uibModal, $log) {

      $http
          .post('/your_pass_to_json.json', data)
          .then(function(data) {
              $scope.items = data.items;
          });

      $scope.open = function(size) {
          var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return $scope.items;
              }
            }
          });

这里是 plunker ，但我在 promise 拒绝中分配了 $scope.items，因为无法模拟 XHR 请求。

更新

或者您可以在 xhr 回调中放置模态打开:

$scope.open = function(size) {
    $http
    .post('/your_pass_to_json.json', data)
    .then(function(data) {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return data.tiems;
              }
            }
       });
   });
}

在这种情况下，模态框总是会延迟打开。我建议你在 Controller 初始化后发出一个 xhr 请求，并对打开事件进行验证:如果 xhr 之前已经被触发，则从 $scope 中获取项目，如果不是，则取消之前的请求并创建一个新请求。