Angular 翻译函数被无限调用

Question

我有一个翻译文本的功能，它与所有文本挂钩，看起来像这样

$rootScope.getWord = function (key) {
  if (angular.isDefined(Language.dict[key])) {
    return Language.dict[key];
  }
  return key;
};

这是它在视图中的连接方式：

<h1 style="text-align: center">{{getWord('Name')}}</h1>

问题是它无限次调用 getWord，即使每个视图只有一个 getWord 实例，它仍然会进入循环。

可以随时更改语言。

我哪里做错了，有什么办法可以解决？

Answer 1

您使用的绑定 ({{getWord('Name')}}) 正在摘要循环的每次迭代中进行评估。将此乘以页面上的 getWord 调用量...

为防止出现这种情况，请使用“one-time binding”:

<h1 style="text-align: center">{{::getWord('Name')}}</h1>

An expression that starts with :: is considered a one-time expression.
One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value.

既然你想重新绑定你的文本，你将不得不做一些不同的事情：

<h1 style="text-align: center">{{translated.Name}}</h1>

然后，在您的控制器中，您必须将所有翻译内容填充到一个 $scope.translated 对象中。
如果语言发生变化，可以再次触发获取翻译的功能。类似于：

$scope.translate = function(keys){
    someTranslationWebService.get(keys, function(response){
        $scope.translated = response;
    });
};

其中 keys 可以是一个数组，如：

['Name', 'CompanyName', 'Address']

response 应该是这样的对象：

{
    "Name": "Recipient's name",
    "CompanyName": "Company name",
    "Address": "Delivery address"
}

另一种选择是使用 "angular-translate" library

Answer 2

尝试使用过滤器，例如

<h1 style="text-align: center">{{ Name | customFilter}}</h1>
angular.module('yourApp')
  .filter('customFilter', ['Language', function(Language) {
    return function(key) {
      return Language.dict[key] || key;
    };
  }]);

Answer 3

你可以试试

 var Language = {dict: {Name: 'Name 1'}};
    $scope.visited = [];
    $rootScope.getWord = function(key) {
        if (angular.isDefined(Language.dict[key])) {
            $scope.visited[key] = Language.dict[key];
            return Language.dict[key];
        }
        $scope.visited[key] = key;
        return key;
    };

和

<span style="text-align: center">{{visited['Name']?visited['Name']:getWord('Name')}}</span>

当语言改变时，只清除访问过的对象。

Angular 翻译函数被无限调用

Angular translation function gets called infinitely

javascript

data-binding

loops

infinite

angularjs