如何通过 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 请求的响应的承诺。
有关详细信息,请参阅
我正在尝试对服务器进行单个 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 请求的响应的承诺。
有关详细信息,请参阅