我一直在尝试使用 Angular 来为数组中的每个 url 列出来自 Google Page Speed 的图像优化结果，但我怀疑控制器被配置为覆盖以前的结果。除了先前的 url 结果之外，不会列出结果。Angular 如何在不覆盖先前结果的情况下为每个 url 发出请求并呈现结果？请看下面的代码：
<section class="container" ng-app="myApp">
<article ng-controller="myCtrl">
<div my-gpsi></div>
</div>
</article>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script>
var test=document.getElementById('testaway');
var urlList = ["https://www.mywebsite.com/array1.html","https://www.mywebsite.com/array2.html", "https://www.mywebsite.com/array3.html"];
var urlNew = [];
angular.module('myApp', [])
.factory('gpsiUrl', function gpsiUrl() {
angular.forEach(urlList,function(url){
this.push("https://www.googleapis.com/pagespeedonline/v2/runPagespeed?url=" + url + "&key=googlekey")
},urlNew);
return urlNew;
})
.controller('myCtrl',['$scope','gpsiUrl', '$http','$sce','$compile', function($scope,gpsiUrl,$http,$sce,$compile){
$scope.urllist=gpsiUrl;
angular.forEach($scope.urllist,function(url){
$http({
method: 'GET',
url: $sce.trustAsResourceUrl(url),
dataType: 'json',
headers: {
"Content-Type": "application/json"
}
}).then(function successCallback(response) {
$scope.pageName = response.data;
$scope.urlBlocks = response.data.formattedResults.ruleResults.OptimizeImages.urlBlocks;
}, function errorCallback(response) {
console.log("fail");
});
});
}])
.directive('myGpsi', function() {
return {
template: '<div><h1 class="jumbotron">{{ pageName.id }}</h1><div ng-repeat="x in urlBlocks"><div ng-repeat="obj in x.urls"><div ng-repeat="n in obj.result"><div style="word-wrap:break-word;"><table><tr><th ng-repeat="j in n track by $index" style="padding:0 1em;">{{ j.key }}</th></tr><tbody><tr><td ng-repeat="j in n track by $index" style="padding:0 1em;">{{ j.value }}</td></tr></tbody></table></div></div><hr style="width: 100%;height: 1px;background-color: #d3d3d3;display: block;margin: 25px 0;"></div></div></div>'
};
})
</script>
在重新考虑方法后得到了这个工作。我删除了 Angular foreach 方法、工厂和服务。相反，ng-repeat 将通过普通 JS for 循环修改的 url 数组通知。结果被追加而不是替换来自先前 http 请求的数据。
var siteUrls['https://www.mywebsite.com/array1.html','https://www.mywebsite.com/array2.html','https://www.mywebsite.com/array3.html','https://www.mywebsite.com/array4.html']
var myapp = angular.module('myApp', []);
myapp.controller('myCtrlr', ['$scope','$http',function($scope, $http) {
for(i=0;i<siteUrls.length;i++){
$scope.mySiteUrls=[];
var newURl="https://www.googleapis.com/pagespeedonline/v2/runPagespeed?url=" + siteUrls[i] + "&rule=googlekey";
$http.get(newURl).then(function(response) {
$scope.mySitePageRaw = response.data;
$scope.mySitePageImageData = response.data.formattedResults.ruleResults.OptimizeImages.urlBlocks;
$scope.mySiteUrls.push($scope.mySitePageRaw,$scope.mySitePageImageData);
});
}
}]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句