Angularjs $rootScope:infdig 在视图方法中调用 http 时出错

Question

我正在尝试从 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>

Answer 1

$http 请求会 return 一个承诺，而不是一些价值。因此，您需要先填充一个作用域变量，然后再使用它（异步）。它应该是这样的：

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>

Answer 2

Could you give a different answer providing an example without using 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 与 {{ }} 的插值绑定中使用函数。这些函数在每个摘要周期中被调用一次或多次。

Erroneous

<div ng-controller="Product">
    <span>{{getTranslation()}}</span>
</div>

return 承诺的异步函数将导致无限摘要错误。

有关详细信息，请参阅

AngularJS 错误参考 - $rootScope:infdig 无限 $digest 循环

Angularjs $rootScope:infdig 在视图方法中调用 http 时出错

Angularjs $rootScope:infdig Error calling http in view method

angularjs

angularjs-scope

angularjs-http

Erroneous