javascript - AngularJS $范围

Question

我目前正在构建一个多语言 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 的垃圾邮件。

这可以更有效地完成吗？

Answer 1

如果 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 检索到的值交换。