Javascript 角度平移函数被无限调用
我有一个翻译文本的函数,它连接到所有文本上,看起来像这样Javascript 角度平移函数被无限调用,javascript,angularjs,loops,data-binding,infinite,Javascript,Angularjs,Loops,Data Binding,Infinite,我有一个翻译文本的函数,它连接到所有文本上,看起来像这样 $rootScope.getWord = function (key) { if (angular.isDefined(Language.dict[key])) { return Language.dict[key]; } return key; }; 这是它在视图中的连接方式: <h1 style="text-align: center">{{getWord('Name')}}</h1>
$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('Name')}
问题是它无限次地调用getWord,即使每个视图只有一个getWord实例,它仍然会进入循环
语言可以随时更改
我做错了什么?修复它的方法是什么?您使用的绑定({{getWord('Name')}
)在摘要循环的每个迭代中都会被评估。将其乘以页面上调用的getWord
数量
要防止出现这种情况,请使用“”:
然后,在控制器中,您必须用所有翻译填充$scope.translated
对象。如果语言发生变化,可以再次触发获取翻译的函数。比如:
$scope.translate = function(keys){
someTranslationWebService.get(keys, function(response){
$scope.translated = response;
});
};
其中,键
可以是如下数组:
['Name', 'CompanyName', 'Address']
响应
应该是如下对象:
{
"Name": "Recipient's name",
"CompanyName": "Company name",
"Address": "Delivery address"
}
另一个选择是使用例如,尝试使用过滤器
<h1 style="text-align: center">{{ Name | customFilter}}</h1>
angular.module('yourApp')
.filter('customFilter', ['Language', function(Language) {
return function(key) {
return Language.dict[key] || key;
};
}]);
{{Name | customFilter}
angular.module('yourApp')
.filter('customFilter',['Language',函数(语言){
返回功能(键){
返回语言。dict[key]| | key;
};
}]);
您可以试试
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;
};
及
{{visted['Name']?visted['Name']:getWord('Name')}
当语言改变时,只需清除访问对象。语言可以随时改变,我如何重新绑定?你不能。不使用一次性绑定。我会看看我是否能想出一些不同的方法。我会说使用角度翻译或有状态过滤器和提供翻译的服务是更好的选择。(角度翻译提供了这样一个过滤器)@Sosdoc:是的,这就是我使用的。这对于重复使用是非常实用的。
<h1 style="text-align: center">{{ Name | customFilter}}</h1>
angular.module('yourApp')
.filter('customFilter', ['Language', function(Language) {
return function(key) {
return Language.dict[key] || key;
};
}]);
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>