Javascript AngularJS:Asynchronous$http.get调用导致视图出现问题

在我的应用程序中，我使用了两个不同的API调用——第一个调用服务目录及其唯一ID，然后，一旦我有了ID，我就调用该服务的定价。然而，我遇到了这样的问题，即第二个GET请求在每次页面加载时被命中数百次，并导致Chrome&Firefox内存问题

在我看来，我有以下几点：

<tr ng-repeat="c in catalog track by $index">
    <td>{{ c.id }}</td> 
    <td>{{ c.name }}</td> 
    <td>{{ c.description }}</td> 
    <td>{{ c.service_status }}</td> 
    <td>{{ getService(c.id) }} {{services}} </td>  
</tr>

我的控制器是这样的

app.controller('customersCtrl', function($scope, $compile, catalogDataFactory, servicesDataFactory, utilities) {

    $scope.catalog = []
    $scope.service = [];

    catalogDataFactory.getCatalog().then(function(result) {
        $scope.catalog = result.data[0]['services'].data; // iterate through JSON to find data array
        console.log("getCatalog is being called too many times"); // called hundreds of times per minute
        $scope.getService = function (guid){
            console.log("getService is being called too many times"); // called hundreds of times per minute
            servicesDataFactory.setGuid(guid);
            // return servicesDataFactory.callAPI();
            $scope.service = servicesDataFactory.callAPI();
        };

    }); // end of catalog promise

}); // end of controller

我收到以下错误：我的浏览器冻结。如果我事先打开了，那么我可以看到错误不断增加（相同的错误数千次），并且

控制台.logs

一次又一次地出现

---

我的问题是。。。我应该为第二个API调用使用服务（而不是工厂）吗？或者我的代码需要以更基本的方式进行更改吗？

首先，从ng repeat中调用函数是一种不好的做法，因为每个$digest周期都会调用getService。这将发生在任何范围更改或任何http回调上。也许这就是你接到这么多电话的原因

---

我建议您不要使用getService方法，而是创建并返回目录及其服务的字典，或者构建一个ad来调用控制器。然后，您可以简单地从该字典中获取服务值

为什么在getCatalog中定义getService？你能把它拉出来吗？也许在getCatalog（）中，只需返回$http.get而不是$http.get（）。然后（）@mavarazy我嵌套了它们，因为getService依赖于getCatalog的结果。但是，我确实测试了它们的非嵌套性，并得到了相同的问题。@glcheetham我需要使用.then（），因为我正在使用承诺来满足get（）请求。API可能会有点慢，所以承诺是必要的。如果不在模板中调用getService，它会工作吗？我今天将尝试一下，因为它有意义。值得注意的是，在ng repeat中调用函数是一种糟糕的做法。事实证明，我的问题稍微复杂一点，这将增加一个答案。

app.controller('customersCtrl', function($scope, $compile, catalogDataFactory, servicesDataFactory, utilities) {

    $scope.catalog = []
    $scope.service = [];

    catalogDataFactory.getCatalog().then(function(result) {
        $scope.catalog = result.data[0]['services'].data; // iterate through JSON to find data array
        console.log("getCatalog is being called too many times"); // called hundreds of times per minute
        $scope.getService = function (guid){
            console.log("getService is being called too many times"); // called hundreds of times per minute
            servicesDataFactory.setGuid(guid);
            // return servicesDataFactory.callAPI();
            $scope.service = servicesDataFactory.callAPI();
        };

    }); // end of catalog promise

}); // end of controller