如何通过 javascript 中的单个 ajax 调用将数据插入更多 AngularJS 控制器

How to insert data to more AngularJS controllers with single ajax call in javascript

我正在尝试对服务器进行单个 ajax 调用,而不是使用响应来调用具有相同数据的更多 AngularJS。我使用 angular.min.js 和 ng-table.min.js 创建 html 表。 但这对我不起作用。

感谢您的帮助。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />
<b>List of Orders 1:</b><br>
    <div>
        <div ng-controller="selectFilterController1">
          <table ng-table="tableParams"  id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%">
            <tbody>
               <tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}">
                <td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td>
                <td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td>
              </tr>
            </tbody>
          </table>
        </div>
<br><b>List of Orders 2:</b><br>
        <div ng-controller="selectFilterController2">
          <table ng-table="tableParams"  id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%">
            <tbody>
               <tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}">
                <td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td>
                <td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td>
              </tr>
            </tbody>
          </table>
        </div>

当我调用函数ajaxCallOrders()时,响应被传送到控制器,但是

var app = angular.module('ngTableApp', ['ngTable']);
var datax;
app.controller('selectFilterController1', function($scope, $http, $filter, $q, NgTableParams) {
    var datax;
    $scope.arrayTemp = [];
    module1 = function(response){
            $scope.myData = angular.fromJson(response.data);
            angular.forEach($scope.myData, function(element) {
                $scope.arrayTemp.push(element);
            });     
            datax=$scope.array = $scope.arrayTemp;  
            $scope.tableParams = new NgTableParams({page: 1, count: datax.length}, {data: datax, counts: [10, 15, 20, datax.length]});
        }
})
app.controller('selectFilterController2', function($scope, $http, $filter, $q, NgTableParams) {
    var datax;
    $scope.arrayTemp = [];
    module2 = function(response){
            $scope.myData = angular.fromJson(response.data);
            angular.forEach($scope.myData, function(element) {
                $scope.arrayTemp.push(element);
            });     
            datax=$scope.array = $scope.arrayTemp;  
            $scope.tableParams = new NgTableParams({page: 1, count: datax.length}, {data: datax, counts: [10, 15, 20, datax.length]});
        }
})
ajaxCallOrders = (function(){
    var orderListData = {"token": authToken, "limit": "50"}; 
    $.ajax({
        type: 'POST',
        url: 'orders.php',
        data: JSON.stringify(orderListData), 
        contentType: 'application/x-www-form-urlencoded',
        dataType: 'text',
        processData: false,
        success: function( data, textStatus, jQxhr ){
            var response = data;
            module1(response);
            module2(response);
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
});

要包含可注入多个控制器的方法和数据,请创建一个 AngularJS service

app.service("orders", function($http) {
    var orderListData = {"token": authToken, "limit": "50"};
    var config = { params: orderListData };
    var ordersPromise = $http.get("orders.php",config);

    this.getPromise = function() {
        return ordersPromise;
    });
};

用法:

app.controller('selectFilterController2', function(orders, NgTableParams) {
    orders.getPromise().then(function(response){
        $scope.array = response.data;
        var xLength = $scope.array.length;    
        $scope.tableParams = new NgTableParams(
            {page: 1, count: xLength},
            {data: datax, counts: [10, 15, 20, xLength]}
        );
    }
})

该服务使用 $http 服务执行 XHR GET 请求并存储承诺。 orders 服务可以注入多个控制器或其他自定义服务。 getPromise 方法 returns 包含来自 GET 请求的响应的承诺。

有关详细信息,请参阅