5
私は角度のためのいくつかのi18nプラグインを見ましたが、私は車輪を再発明したくありません。 i18nextは良いライブラリなので、私はそれを使うつもりです。私はちょうど国際化ライブラリを呼び出すディレクティブのi18n作成した角度とi18next
：私のページで
define(['app', 'jquery', 'i18n'], function(app, $, i18n) {'use strict';
app.directive('i18n', function() {
return function($scope, elm, attrs) {
attrs.$observe('i18n', function(value) {
if ($.fn.i18n) {// for some reason, it isn't loaded quickly enough and first directives process fails
$(elm).i18n();
}
});
};
});
});
を、私はその場で言語を変更することができます。
今<a ng-repeat="l in languages"> <img ng-src="images/{{l.id}}.png" title="{{l.label}}" ng-click="setLanguage(l.id)" /> </a>
を、私のメインコントローラは、HTMLで定義されていますタグ：
define(['app', 'i18n', 'jquery'], function(app, i18n, $) {'use strict';
return app.controller('BuilderController', ['$scope', '$location',
function BuilderController($scope, $location) {
/* Catch url changes */
$scope.$watch(function() {
return $location.path();
}, function() {
$scope.setLanguage(($location.search()).lang || 'en');
});
/* Language */
$scope.languages = [{
id : "en",
label : "English"
}, {
id : "fr",
label : "Français"
}];
$scope.$watch('language', function() {
$location.search('lang', $scope.language);
i18n.init({
resGetPath : 'i18n/__lng__/__ns__.json',
lng : $scope.language,
getAsync : false,
sendMissing : true,
fallbackLng : 'en',
debug : true
});
$(document).i18n();
});
$scope.setLanguage = function(id) {
$scope.language = id;
};
}]);
});
どのように動作するのですか：ウォッチャーは新しいロケールでi18nオブジェクトを初期化します次に、i18n jquery拡張を使用してすべてのDOMを更新します。この特別なイベントの外では、私のディレクティブは他のすべてのタスク（i18nディレクティブを使用し、後でレンダリングされるテンプレート）に対して完全に機能します。
正常に動作していますが、コントローラ内でDOMを操作すべきではないことがわかりますが、最終的には何も起こらないため、より良い解決策は見つかりませんでした。
理想的には、AngularがすべてのDOMを再コンパイルし、すべてのディレクティブを解析してラベルを更新することをお勧めしますが、これを行う方法はわかりません。 私は$ scopeを試しました。$ apply（）：この時点ですでにダイジェストで動作していません 私はScope.onReadyプラグインを使用して、より良い結果を得ました。
明らかに、私はAngularには新しく、物事の仕組みを正確に理解することはかなり難しいです。