5
각도에 대한 일부 i18n 플러그인을 보았지만 휠을 다시 발명하고 싶지는 않습니다. i18next는 좋은 라이브러리이므로 사용하려고합니다.각도 및 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 플러그인을 사용했습니다.
분명히 저는 앵귤러를 처음 접했고 정확히 어떻게 작동하는지 정확하게 이해하기가 어렵습니다.