Question

如何在angular.js中的单个控制器中拥有多个ajax响应数据？

示例代码（Controller）：

第一个API :(从服务器获取小面板详细信息）

var Api = $resource('/portal/api/notificationdashlet/'+id);
    $scope.tableParams = new ngTableParams({
       page: 1,            // show first page
       count: 10,          // count per page
       sorting: {
         name: 'asc'     // initial sorting
       }
    }, {
    total: 0,           // length of data
    getData: function($defer, params) {
        // ajax request to api
        Api.get(params.url(), function(data) {
            $timeout(function() {
                //params.total(data.total);
                $defer.resolve(data.result);
                console.log(data.result);
            }, 10);
        });
    }
});

第二个API :(从服务器获取DOB详细信息）

var Api1 = $resource('/portal/api/notificationdob/');
    $scope.tableParams = new ngTableParams({
       page: 1,            // show first page
       count: 10,          // count per page
       sorting: {
         name: 'asc'     // initial sorting
       }
    }, {
    total: 0,           // length of data
    getData: function($defer, params) {
        // ajax request to api
        Api1.get(params.url(), function(data) {
            $timeout(function() {
                //params.total(data.total);
                $defer.resolve(data.result);
                console.log(data.result);
            }, 10);
        });
    }
});

查看（HTML）：

第一个API表：

<table ng-table="tableParams" show-filter="true" class="table">
    <thead>
        <tr>
        <td>Title<td>
        <td>Name<td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="val in $data ">
            <td>{{val.t}}</td>
            <td>{{val.n}}</td>
        </tr>
    <tbody>
</table>

第二个API表：

<table ng-table="tableParams" show-filter="true" class="table">
    <thead>
        <tr>
        <td>Date<td>
        <td>Desc<td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="details in $data ">
            <td>{{details.d}}</td>
            <td>{{details.des}}</td>
        </tr>
    <tbody>
</table>

Answer 1

您通常只会发出两个单独的请求，在触发结果回调时填充$q.all对象。视图将自动刷新。如果您不想在完成所有ajax请求之前刷新视图，那么将一些promise与setTimeout链接在一起。有关详细信息，请参阅https://docs.angularjs.org/api/ng/service/ $ q。还有其他方法可以做到这一点，但angular鼓励使用其内置的$ q库。这是一个示例（更改ajaxStuff服务的内容以满足您的需要;没有服务器可以使用此处，因此我使用'use strict'; /* App Module */ angular.module('testApp', []) .controller('test-controller', function($scope, $q, ajaxStuff){ var promise1 = ajaxStuff.getData1(); var promise2 = ajaxStuff.getData2(); $q.all([promise1, promise2]).then(function(results){ $scope.foo = results[0]; $scope.bar = results[1]; }); }).factory('ajaxStuff', function($q){ return{ getData1: function(){ var deferred = $q.defer(); setTimeout(function(){ deferred.resolve('foo'); }, 1000); return deferred.promise; }, getData2: function(){ var deferred = $q.defer(); setTimeout(function(){ deferred.resolve('bar'); }, 500); return deferred.promise; } }; });模拟服务器调用）：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="testApp">
    <div ng-controller="test-controller">
      {{foo}}{{bar}}
    </div>
  </div>

{{1}}

如何在Angularjs单控制器中添加多个ajax请求

1 个答案: