我编写了一个包含此功能的 Controller :
$scope.getItemName = function (id) {
sgcdata.get('item', {
_id: id
}).then(function (dataItem) {
return dataItem[0].brand_name + " " + dataItem[0].reference;
});
}
在 View 中:
<li ng-repeat="itemCart in connectedUser.cart track by $index" class="list-group-item">
<span class="badge cursorpointer" ng-click="removeFromCart(itemCart)">X</span>
<a href="#">{{ getItemName(itemCart) }}</a>
</li>
当我这样做时,我会遇到无限循环($rootScope:infdig
)。
sgcdata.get
发出 XHR 请求。
但是如果我返回一个简单的字符串,它就会起作用:
$scope.getItemName = function (id) {
return "toto";
}
我真的不明白发生了什么......
感谢您的帮助。
编辑
我做了一个过滤器而不是以前的函数:
JS:
sgc.filter('getItemName', [
'sgcdata',
function (sgcdata) {
return function (id) {
sgcdata.get('item', {
_id: id
}).then(function (dataItem) {
return dataItem[0].brand_name + " " + dataItem[0].reference;
});
}
}
]);
HTML:
<li ng-repeat="itemCart in connectedUser.cart track by $index" class="list-group-item">
<span class="badge cursorpointer" ng-click="removeFromCart(itemCart)">X</span>
<a href="#">{{ itemCart | getItemName }}</a>
</li>
我不再有任何无限循环,但我无法在 ng-repeat 中获取多个值,而过滤器返回位于项目请求中。
编辑
sgcdata.get:
service.get = function (collection, filters) {
var deferred = $q.defer();
var formatRequest = function (obj) {
var str = [];
for (var p in obj) {
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
}
if (str.length) {
return '&' + str.join('&');
} else {
return '';
}
};
$http({
method: 'GET',
url: '/v1/get/?element=' + collection.toLowerCase() + formatRequest(filters)
}).then(function (response) {
deferred.resolve(response.data);
}, function (response) {
console.error("[ FAILED ] >> " + response);
});
return deferred.promise;
}
最佳答案
由于摘要循环本身的性质,从 ng-repeat
HTML 模板中调用函数总是会导致Infinite Digest
错误。
本质上,ng-repeat
尝试渲染子节点。在子节点中,您正在调用一个函数,这会导致发生摘要。这个新的摘要会导致 ng-repeat 重新开始,从而导致子节点再次运行,从而导致另一个摘要,无限循环。
有几种普遍接受的方法来处理这个问题,每种方法都有自己的优点和缺点。
从服务器获取原始数组时,在服务器上执行逻辑以将所有相关字段包含在原始返回值中。这是非常高效的,因为您允许服务器完成所有繁重的工作,并且只需对服务器进行一次调用。但是,您可能会发送仅对应用程序的一小部分有用的额外数据,这可能会减慢初始启动时间。
获取原始数组时,为返回的每个元素运行该函数,以将额外的数据添加为每个元素的新属性。这是相当有效的,因为这意味着所有数据都是前端加载的,并且您只需对每个元素进行一次额外的调用。这可能会受到与发送不常用数据相同的负面影响,并且如果您有许多元素需要迭代,这也会加剧初始启动速度。
向
ng-repeat
添加一个过滤器,而不是向元素添加一个过滤器,它会迭代数组并独占为获取额外数据ng-重复
。这样做的优点是,仅当 ng-repeat 存在时才对服务器进行额外的调用,并且不会将额外的数据添加到原始数组中。然而,这些对服务器的额外调用将在ng-repeat
发生变化时执行(添加新元素、删除项目、应用其他过滤器等),这可能会导致严重的性能损失,具体取决于数据量和变化频率。
关于javascript - AngularJS:错误:[$rootScope:infdig] - 在 AngularJS View 中调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48524080/