Как вставить данные в несколько контроллеров AngularJS с помощью одного вызова AJAX в JavaScript - PullRequest
Новая
       38

Как вставить данные в несколько контроллеров AngularJS с помощью одного вызова AJAX в JavaScript

0 голосов
/ 12 мая 2019

Я пытаюсь сделать один 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 );
        }
    });
});

1 Ответ

0 голосов
/ 12 мая 2019

Чтобы содержать методы и данные, которые можно вводить в несколько контроллеров, создайте службу AngularJS . 

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 возвращает обещание, которое содержит ответ от запроса GET.

Для получения дополнительной информации см.

...