Angularjs $ rootScope：infdig在视图方法中调用http时出错
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angularjs $ rootScope：infdig在视图方法中调用http时出错相关的知识，希望对你有一定的参考价值。
我正在尝试从AngularJS应用程序的html页面中的服务器获取一些信息。但是，当我在带有$ scope的html文件中调用该函数时，该方法本身工作正常。我得到$ rootScope：infidg错误。
控制器中的方法：
$scope.getTranslation = function(){
$http.get('https://producthero.com/index.php?option=com_hero&task=language.translate&s=SEARCH')
.then(
function (response) {
return response.data.translation;
}
);
};
使用ng-app和ng-controller调用html文件：
<div ng-controller="Product">
<span>{{getTranslation()}}</span>
</div>
我正在使用这种翻译方式，因为网站的初始后端在Joomla中运行，我知道i18n，但我们不能在这里使用它。
错误是：
http://errors.angularjs.org/1.6.4/$rootScope/infdig?p0=10&p1=%5B%5D
angular.min.js:123 Error: [$rootScope:infdig] <http://errors.angularjs.org/1.6.4/$rootScope/infdig?p0=10&p1=%5B%5D> at angular.min.js:6 at m.$digest (angular.min.js:147) at m.$apply (angular.min.js:149) at angular.min.js:21 at Object.invoke (angular.min.js:44) at c (angular.min.js:21) at Sc (angular.min.js:22) at ue (angular.min.js:20) at HTMLDocument.<anonymous> (angular.min.js:331) at i (jquery.min.js:2)
我希望这只是我的愚蠢而且我错过了一些可以用http进行这种直接调用的东西！
编辑：
我对我的翻译问题的解决方案如下（感谢@Aleksey Solovey的回答）：
控制器方法
$scope.translations = {};
$scope.getTranslation = function(string){
$http.get('https://producthero.com/index.php?option=com_hero&task=language.translate&s=' + string)
.then(
function (response) {
$scope.translations[string] = response.data.translation;
});
};
查看电话
<div ng-app="products">
<div ng-controller="Product">
<span ng-init="getTranslation('SEARCH')">{{translations.SEARCH}}</span>
</div>
</div>
$http请求将返回Promise，而不是一些值。因此，您需要首先填充范围变量，然后使用它（异步）。这是它应该是什么样子：
var app = angular.module('myApp', []);
app.controller('Product', function($scope, $http) {
$scope.getTranslation = function() {
$http.get('https://producthero.com/index.php?option=com_hero&task=language.translate&s=SEARCH').
then(function(response) {
$scope.translation = response.data.translation;
});
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Product">
<span ng-init="getTranslation()">{{translation}}</span>
</div>
</div>你可以给出一个不同的答案，提供一个不使用ng-init的例子吗？
只需在控制器中手动初始化它：
app.controller('Product', function($scope, $http) {
$scope.getTranslation = function() {
$http.get('https://producthero.com/index.php?option=com_hero&task=language.translate&s=SEARCH').
then(function(response) {
$scope.translation = response.data.translation;
});
};
//INSTEAD OF ng-init
$scope.getTranslation();
});
<div ng-app="myApp">
<div ng-controller="Product">
̶<̶s̶p̶a̶n̶ ̶n̶g̶-̶i̶n̶i̶t̶=̶"̶g̶e̶t̶T̶r̶a̶n̶s̶l̶a̶t̶i̶o̶n̶(̶)̶"̶>̶{̶{̶t̶r̶a̶n̶s̶l̶a̶t̶i̶o̶n̶}̶}̶<̶/̶s̶p̶a̶n̶>̶
<span>{{translation}}</span>
</div>
</div>
可以滥用ng-init指令将不必要的逻辑量添加到模板中。 ngInit只有少数适当的用途。见AngularJS ng-init API Reference。
出于性能原因，应避免在与{{ }}的HTML插值绑定中使用函数。每个摘要周期将这些函数调用一次或多次。
错误
<div ng-controller="Product"> <span>{{getTranslation()}}</span> </div>
返回promise的异步函数将导致无限的摘要错误。
有关更多信息，请参阅
以上是关于Angularjs $ rootScope：infdig在视图方法中调用http时出错的主要内容，如果未能解决你的问题，请参考以下文章
如何删除 angularjs 中的 $rootScope 变量？ [复制]
AngularJS中Error: [$rootScope:inprog]的解决办法
错误：$rootScope:inprog 操作已经在进行中 mvc 与 angularjs