我目前正在构建一个多语言 AngularJS 应用程序。我的所有数据都是从 api 检索的,它返回正确的语言。问题是。目前,我正在为应用程序中的每个按钮、所有内容使用 $scope
。这是最好的方法还是有办法直接从 View 调用它。
例如:
{{datakey.get.test}}
一些应用程序特定信息:
我从 api 获取一次数据(加载应用程序时)。作为 $http,我当前检索数据,然后对于每个范围我执行以下操作:
例如选择按钮:
$scope.selectButton = resourceKey.filter(function (item) {
return item.name === prefix + "select-button"
})[0].value;
然后在 View 中我调用 {{selectButton}}
但问题是。我的 Controller 目前收到了这些类似于 $scope 的垃圾邮件。
这可以更有效地完成吗?
最佳答案
如果 key 全部已知并从 API 检索,您可以编写一条指令来为您进行替换,而不必使您的范围变得困惑。作为练习,我未实现变量参数替换(例如“您已选择 {0} 项”中的 {0})...无论如何,当值是静态/非静态时,您应该避免监视改变。
angular.module('myApp', [])
// Mocking these out, assuming they would come from API and be set in
// key: value manner
.value('localeKeys', {
'datakey.get.test': 'Testing 1',
'datakey.select-button': 'Select'
})
// Simple lookup
.directive('appTranslate', function (localeKeys) {
return {
restrict: 'AE',
link: function (scope, elem, attrs) {
var attr = attrs.appTranslate,
translated = localeKeys[attr] || attr || '';
elem.html(translated);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<h3 app-translate="datakey.get.test"></h3>
<button type="button" app-translate="datakey.select-button"></button>
</div>
上面的示例只是在 localeKeys 中查找提供给指令的值。您可以将这些 localeKey 与从 API 检索到的值交换。
关于javascript - AngularJS $范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33484292/