[javascript] 컨트롤러에서 각도 변환에 대한 올바른 사용

권장 : 컨트롤러에서 번역하지 말고보기에서 번역하세요.

컨트롤러를 번역 로직에서 자유롭게 유지하고 다음과 같이 뷰 내에서 직접 문자열을 번역하는 것이 좋습니다.

<h1>{{ 'TITLE.HELLO_WORLD' | translate }}</h1>

제공된 서비스 이용

Angular Translate는 $translate컨트롤러에서 사용할 수 있는 서비스를 제공합니다 .

$translate서비스 사용의 예 는 다음과 같습니다.

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $translate('PAGE.TITLE')
        .then(function (translatedValue) {
            $scope.pageTitle = translatedValue;
        });
});

번역 서비스에는 다음을 사용하여 promise를 처리 할 필요없이 문자열을 직접 번역하는 방법도 있습니다 $translate.instant().

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $scope.pageTitle = $translate.instant('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

using의 단점 $translate.instant()은 비동기로로드하는 경우 언어 파일이 아직로드되지 않는다는 것입니다.

제공된 필터 사용

이런 식으로 promise를 처리 할 필요가 없기 때문에 이것이 제가 선호하는 방법입니다. 필터의 출력은 범위 변수로 직접 설정할 수 있습니다.

.controller('TranslateMe', ['$scope', '$filter', function ($scope, $filter) {
    var $translate = $filter('translate');

    $scope.pageTitle = $translate('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

제공된 지시문 사용

@PascalPrecht는이 멋진 라이브러리의 제작자이므로 그의 조언 (아래 답변 참조) 과 함께 이동하여 매우 지능적인 번역을 처리하는 것처럼 보이는 지침을 사용하는 것이 좋습니다 .

이 지시문은 비동기 실행을 처리하며 번역에 동적 값이없는 경우 범위에서 번역 ID를 관찰 할 수있을만큼 영리합니다.

답변

<h1 translate="{{pageTitle}}"></h1>

.controller('foo', function ($rootScope, $scope, $translate) {
  $rootScope.$on('$translateChangeSuccess', function () {
    $scope.pageTitle = $translate.instant('PAGE.TITLE');
  });
})

$translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
    vm.si = translations['COMMON.SI'];
    vm.no = translations['COMMON.NO'];
});

    $rootScope.$on('$translateChangeSuccess', function () {
        $translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
            vm.si = translations['COMMON.SI'];
            vm.no = translations['COMMON.NO'];
        });
    });