角度平移函数被无限调用答案

【问题标题】：Angular translation function gets called infinitely角度平移函数被无限调用
【发布时间】：2015-10-14 22:42:41
【问题描述】：

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

$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 实例，它仍然会进入循环。

可以随时更改语言。

我做错了什么以及如何解决它？

【问题讨论】：

标签： javascript angularjs loops data-binding infinite

【解决方案1】：

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

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

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

以:: 开头的表达式被视为一次性表达式。
一次性表达式一旦稳定就会停止重新计算，如果表达式结果是非未定义值，则在第一次摘要之后发生。

由于您希望能够重新绑定文本，因此您将不得不做一些不同的事情：

<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

【讨论】：

语言可以随时更改，那我该如何重新绑定？
你不能。不是一次性绑定。我会看看我能不能想出一些不同的东西。
我会说使用 angular-translate 或带有提供翻译的服务的有状态过滤器是这里更好的选择。（angular-translate 提供了这样的过滤器）
@Sosdoc：是的，这就是我使用的。

【解决方案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;
    };
  }]);

【讨论】：

【解决方案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>

当语言发生变化时，只需清除访问过的对象。

【讨论】：

这对于重复使用非常实用。