AngularJS NG-結合動態變量名稱

我試圖完成一些類似的添加使用AngularJS語言支持：AngularJS NG-結合動態變量名稱

window.language = english; 
$scope.title.english = "English thing"; 
$scope.title.spanish = "Espanol Si"; 

<h1 ng-bind="title.{{window.language}}"></h1>

任何人都知道如何從模板中做這樣的事？

來源

2015-11-02 user2476265

括號表示法：'title [language]'。 **注意：如果您沒有在js中使用'$ scope.window = window'，則視窗不可用* – Grundy

您應該爲此使用插件。有多個，請查看這個：https://angular-translate.github.io/docs/#/guide如果你堅持手動執行，請告訴我。 – VSO

有實現這一目標的途徑複式：

1 - 以HTML的邏輯：

$scope.window = window; 
$scope.title = { 
    english: 'English thing', 
    spanish: 'Espanol Si' 
};

HTML

<h1 ng-bind="title[window.language]"></h1>

或

<h1>{{title[window.language]}}</h1>

但是這會導致大量的重複代碼，你也將與沒有文本最終在所有失蹤的翻譯（也沒有錯誤）

2 - 在控制器邏輯

var title = { 
    english: 'English thing', 
    spanish: 'Espanol Si' 
}; 

$scope.getTitle = function() { 
    // maybe add code for error handling here 
    return title[window.language]; 
};

HTML

<h1 ng-bind="getTitle()"></h1>

或

<h1>{{getTitle()}}</h1>

這仍然給你帶來很多代碼重複，但是至少你可以執行一些驗證邏輯並且可能會在缺少驗證（或提供某種回退機制）時拋出錯誤。此外，因爲它現在是JavaScript代碼，所以它也很容易測試。

3 - 創建自定義過濾

JS - 濾波器

angular 
    .module('myI18n', []) 
    .filter('my18n', function() { 
     return function(data) { 
      // add code for error handling etc. here 
      return data[window.language]; 
     }; 
    });

JS - 控制器

$scope.title = { 
    english: 'English thing', 
    spanish: 'Espanol Si' 
};

HTML

<h1 ng-bind="title | myI18n"></h1>

或

<h1>{{title | myI18n}}</h1>

這可能是你能得到乾淨的解決方案，而且它也很傳神，你在你的HTML應該發生在你的代碼是什麼直接的狀態，而不依賴於實現細節（也許你想改變窗口。語言to window.i18n.language稍後或類似的東西）。也很容易再次測試。

所以，如果你真的想自己去實現這樣的事情，我會推薦第三個選項，但是你必須知道你僅限於同步翻譯。對於更復雜的方法，我真的會推薦使用一個隨時可用的i18n庫，如angular-translate

來源

2015-11-02 15:50:05

AngularJS NG-結合動態變量名稱

回答

相關問題