AngularJS $scope
AngularJS $scope
提问于 2015-11-02 18:19:50
我目前正在构建一个多语言的AngularJS应用程序。我的所有数据都是从返回正确语言的api中检索的。问题是。目前，我正在使用$scope的每一个按钮，在应用程序中的每样东西。这是最好的方式，还是有办法直接从视图中调用它。
例如：
{{datakey.get.test}}一些特定应用程序的信息：
我从api中获得一次数据(当加载应用程序时)。作为一个$http，我当前检索数据，然后对每个范围执行以下操作：
例如，选择按钮：
$scope.selectButton = resourceKey.filter(function (item) {
return item.name === prefix + "select-button"
})[0].value;然后在视图中我称之为{{selectButton}}
但问题是。我的控制器现在正被这些$scopes垃圾处理。
这样做是否更有效率呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-11-02 18:33:51
如果所有的键都是已知的，并且是从API中检索出来的，那么您可以编写一个指令来代替您，而不必将您的范围弄乱。作为练习，我保留了变量arg替换(例如，在“您选择了{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中的指令的值。您可以用从API中检索的值交换这些localeKeys。
Stack Overflow用户
发布于 2015-11-02 18:39:43
另一种选择是使用筛选器而不是指令：
.filter('translate', function (localeKeys) {
return function(input) {
return localKeys[input] || 'Missing translation for' + input;
};
});
# View
{{ 'translation.key' | translate }}Stack Overflow用户
发布于 2015-11-02 18:25:05
因为您正在获取静态数据(您不会更改按钮名称)，所以您可以单向绑定您的按钮名，避免了开销，只需使用:: --这告诉我们不要在表达式上放置一个$watch，以查看是否有任何更改。
{{::datakey.get.test}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33484292
复制相关文章
相似问题
腾讯云开发者
