AngularJS $ scope

Question

我目前正在構建一個多語言的AngularJS應用程序。我的所有數據都是從api中檢索的，它返回正確的語言。問題是。目前，我爲應用中的每個按鈕都使用$scope。這是最好的方式還是有辦法從視圖直接調用它。

例如：

{{datakey.get.test}} 

一些專用信息：

我得到的數據，一旦從API（加載應用程序時）。作爲$ HTTP我目前檢索數據，然後爲每個範圍我這樣做：

例如選擇按鈕：

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

然後在我打電話{{selectButton}}

的看法，但問題是。我的控制器目前正在使用這些有點範圍的垃圾郵件。

這可以更有效地完成嗎？

Answer 1

如果密鑰都是已知的並從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中檢索的值交換。

Answer 2

由於您正在獲取靜態數據（您不會更改按鈕名稱），因此可以使用單向綁定來綁定按鈕名稱，以避免開銷，只需使用::即可告知角度，DONT'N會將$ watch放在該表達式上看看是否有任何改變。

{{::datakey.get.test}} 

Answer 3

另一種選擇是改爲使用指令過濾器：

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

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