AngularJS $ http.get()递归杀死浏览器

时间:2013-12-12 20:38:05

标签: angularjs

问题

我创建了一个包含$http.get()电话的工厂。我相信这个调用会以某种方式创建一个无限递归 - 有时候我会看到"10 $digest() iterations reached. Aborting!"错误,有时它会让浏览器无响应,所以我必须杀死它。

如果我从工厂的$http.get()删除getOptionsForComponentType()来电,而是返回一个硬编码阵列(如果我还删除了控制器.then()中的getAvailableOptions()来电,该服务实际上按预期将数据返回给控制器。这使我相信正是我的$http.get()调用正在创建无限递归,而不是服务本身。

我的$http.get()电话和/或服务出了什么问题?

代码

JS

我的所有JS都在一个文件中,该文件与AngularJS一起包含在页面中。以下是(希望所有)相关部分:

var admin = angular.module('adminApp', []);
admin.factory('myService', function($http) {
    return {
        getOptionsForComponentType : function(componentType) {
            var url = '/griconfigurator/index/getComponentsOfTypeAction/component_type/' + componentType;
            return $http.get(url)
                .then(function(response) {
                    return response.data;
                });
        }
    };
});

admin.controller('configController', function(myService) {
    this.getAvailableOptions = function(componentType) {
        var options = [];
        myService.getOptionsForComponentType(componentType).then(
            function(data) {
                options = data;
                console.log('then success');
            },
            function(data) {
                console.log('then failure');
            }
        );
        return options;
    };
});

模板

然后,在我创建的指令的模板中(让我知道是否需要提供有关我的指令/模板的更多详细信息):

<table>
    <tr>
        <th>Add/Remove</th>
        <th>SKU<br/><input ng-model='columnFilters.sku' type='text'></th>
        <th>category<br/><input ng-model='columnFilters.cat' type='text'></th>
        <th>sub cat<br/><input ng-model='columnFilters.subCat' type='text'></th>
        <th>Finish<br/><input ng-model='columnFilters.column_finish' type='text'></th>
        <th>Height<br/><input ng-model='columnFilters.column_height' type='text'></th>
        <th>Stock<br/><input ng-model='columnFilters.stock' type='text'></th>
        <th>Price</th>
    </tr>
    <tr ng-repeat='option in config.getAvailableOptions(component.type) | filter:columnFilters'>
</table>

2 个答案:

答案 0 :(得分:0)

问题是您从ng-repeat致电工厂。每次config.getAvailableOptions(component.type)更改时,因此当您更新值时会强制角度执行新的摘要周期,这会导致错误,如:

 "10 $digest() iterations reached. Aborting!" 

在更新值时强制角度进行摘要循环。

要避免此错误,请从控制器调用factory,但不要从ng-repeat

调用

答案 1 :(得分:0)

最好的方法是调用工厂,将其应用于$ scope变量,然后像这样编写ng-repeat:

SCOPEVAR中的

选项滤波器:嗒嗒