問題を理解するのに役立つ簡単な背景情報: angularjs を使用していますが、文章を外国語に翻訳する方法に関して問題が発生しました。現在のセットアップは次のようになります。
JS ディレクティブ:
Rohan.directive('translate', ['$filter', function ($filter) {
var translateElement = function(element, data, lang){
var results = $filter('I')(element.html(), data, lang);
element.html(results.text);
if (results.tooltip) element.attr('data-tooltip', results.tooltip);
};
return {
restrict: 'A',
link: function (scope, element, attrs) {
translateElement(element, attrs.translate, scope.currentLanguage);
}
}
}
}]);
JS フィルター:
Rohan.filter('I', [function () {
return function (key, data) {
key = $.trim(key);
var string = "..." + key + "...";
try {
string = Langfile[currentLanguage][key].value;
} catch (e) {
console.warn("Translation not found: " + JSON.stringify(key));
}
return {"text": string};
};
これは基本的に、配列内で正しい翻訳を検索するだけです。したがって、私たちが直面している問題は、この data-translate タグが次のように他のディレクティブ内にネストされている場合です。
JS 問題ディレクティブ
Rohan.directive('easydialog', function () {
return {
restrict: 'E',
transclude: true,
scope: {
text: '@',
showDialog: '=',
useableButtons: '=',
onDialogClicked: '='},
replace: true,
template:
'<div>' +
'<easymodal data-show="showDialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' +
'<button data-ng-repeat="useableButton in useableButtons" data-ng-click="closeWindow(); onDialogClicked(\'{{useableButton}}\')" data-translate>{{useableButton}}</button>' +
'</easymodal>' +
'</div>'
};
});
出力:
<button>incorrect_input</button>
それ以外の
<button>Your input is incorrect</button> //Or whatever language is selected
したがって、Angular は最初に data-translate タグを解決しますが、その時点では {{useableButton}} はまだ {{useableButton}} のままであり、その時点で実際に挿入している値ではありません。
これはそのフィルターを使用することで解決できますが、別の回避策が必要になるため、実際には削除したいと考えています。
だから私が見たいのは:
- Easydialog ディレクティブの処理を開始します。
- {{useableButton}} をその中にあるものに変更します。
- 次に、その {{useableButton}} 内にあるものでデータ変換ステップを開始します。