javascript - Angular 平移函数被无限调用

Question

我有一个翻译文本的函数，它卡在所有文本上，看起来像这样

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

这是它在 View 中的连接方式:

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

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

可以随时更改语言。

我做错了什么，如何解决？

Answer 1

您使用的绑定(bind) ({{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.

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

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

然后，在您的 Controller 中，您必须将所有翻译内容填充到一个 $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