AngularJS $ scope

我目前正在构建一个多语言的AngularJS应用程序。我的所有数据都是从api中检索的，它返回正确的语言。问题是。目前，我为应用中的每个按钮都使用$scope。这是最好的方式还是有办法从视图直接调用它。

例如：

{{datakey.get.test}}

一些专用信息：

我得到的数据，一旦从API（加载应用程序时）。作为$ HTTP我目前检索数据，然后为每个范围我这样做：

例如选择按钮：

$scope.selectButton = resourceKey.filter(function (item) { 
    return item.name === prefix + "select-button" 
})[0].value;

然后在我打电话{{selectButton}}

的看法，但问题是。我的控制器目前正在使用这些有点范围的垃圾邮件。

这可以更有效地完成吗？

来源

2015-11-02 TVH7

如果密钥都是已知的并从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, 
 
      \t 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提供给该指令的值。您可以将这些localeKeys与您从API中检索的值交换。

来源

2015-11-02 18:33:51 Patrick

由于您正在获取静态数据（您不会更改按钮名称），因此可以使用单向绑定来绑定按钮名称，以避免开销，只需使用::即可告知角度，DONT'N会将$ watch放在该表达式上看看是否有任何改变。

{{::datakey.get.test}}

来源

2015-11-02 18:25:05 levi

另一种选择是改为使用指令过滤器：

.filter('translate', function (localeKeys) { 
    return function(input) { 
     return localKeys[input] || 'Missing translation for' + input; 
    }; 
}); 

# View 
{{ 'translation.key' | translate }}

来源

2015-11-02 18:39:43 BroiSatse

喜欢它，但应该添加一次结合。过滤器对性能问题有一定的影响，但这应该可以忽略不计。 – Patrick

回答

相关问题