Google Pagespeed Insight结果是否可以使用Angular从网址列表中列出？

Question

我一直在尝试使用Angular作为一种方式来列出Google Page Speed中图像优化结果的数组中的每个url，但我怀疑控制器配置为覆盖以前的结果。除了之前的网址结果之外，结果不会被列出。 Angular如何在不覆盖以前的结果的情况下为每个网址发出请求并呈现结果？请参阅下面的代码：

<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> 

Answer 1

重新思考这个方法后，得到这个工作。我删除了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); 
}); 
} 
}]);