컨트롤러의 각도 변환에 대한 올바른 사용

컨트롤러의 각도 변환에 대한 올바른 사용

각도 변환은 각도 변환에서 i18n에 사용합니다.JS 어플리케이션

모든 애플리케이션 뷰에 전용 컨트롤러가 있습니다.아래 컨트롤러에서 페이지 제목으로 표시되는 값을 설정합니다.

코드

HTML

<h1>{{ pageTitle }}</h1>

자바스크립트

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = $filter('translate')('HELLO_WORLD');
    }])

.controller('SecondPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = 'Second page title';
    }])

angular-translate-loader-url 확장자를 사용하여 번역 파일을 로드합니다.

문제

첫 번째 페이지 로드 시 변환 키가 해당 키의 변환 대신 변환 키가 표시됩니다.은 ★★★★★Hello, World!하지만 나는 보고 있다.HELLO_WORLD.

두 번째 페이지로 이동하면 모든 것이 정상이며 번역본이 표시됩니다.

에 값을 때 되지 않은 합니다.$scope.pageTitle.

발언

「」를 사용하고 <h1>{{ pageTitle | translate }}</h1> ★★★★★★★★★★★★★★★★★」$scope.pageTitle = 'HELLO_WORLD';이치노문제는 번역을 항상 사용하고 싶지 않다는 것입니다(예를 들어 두 번째 컨트롤러에서는 raw 문자열을 전달하고 싶을 뿐입니다).

질문.

이미 알려진 문제/제한 사항입니까?이 문제를 어떻게 해결할 수 있을까요?

권장: 컨트롤러에서 번역하지 않고 보기 내에서 번역

컨트롤러를 번역 로직에서 벗어나 다음과 같이 문자열을 뷰 내에서 직접 번역할 것을 권장합니다.

<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;
        });
});

에는 약속을 없이 .$translate.instant():

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

「」를 사용하는 $translate.instant()언어 파일을 비동기적으로 로드하는 경우 언어 파일이 아직 로드되지 않았을 수 있습니다.

제공된 필터 사용

약속을 이런 식으로 처리할 필요가 없기 때문에 이것이 내가 선호하는 방법이다.필터의 출력을 스코프 변수로 직접 설정할 수 있습니다.

.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>

이 디렉티브는 비동기 실행을 처리하며 변환에 다이내믹 값이 없는 경우 스코프 상의 변환 ID를 언패치할 수 있습니다.

하지만 방법이 없어서 꼭 써야 한다면$translate을 "콜"로.$translateChangeSuccess를 사용한 $rootScope와와와 $translate.instant()음음음같 뭇매하다

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

왜?$rootScope and$scope에서 angular-translate의 는 angular-translate이기 때문입니다$emit 따라가다$rootScope$broadcast 따라가다$scope전체 스코프 계층을 통해 브로드캐스트할 필요가 없기 때문입니다.

★★★★$translate.instant()뿐만 $translate()$translateChangeSuccess를 들어 실행 " " "를할 수 있습니다.$translate.instant()동기식으로 번역이 가능한 것을 전제로 하고 있습니다.

2.로는 '2.8.0'도 .$translate.onReady()변환이 준비되는 대로 해결된 약속을 반환합니다.체인지로그를 참조해 주세요.

편집: 더 나은 솔루션에 대해서는 Pascal Precht(각번역 저자)의 답변을 참조하십시오.

---

로딩의 비동기 특성이 문제의 원인입니다. ''가 있으면요.{{ pageTitle | translate }}앵귤러현지화 데이터가 로드되면 식 값이 변경되고 화면이 업데이트됩니다.

이 작업은 사용자가 직접 수행할 수 있습니다.

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.$watch(
        function() { return $filter('translate')('HELLO_WORLD'); },
        function(newval) { $scope.pageTitle = newval; }
    );
});

그러나 이렇게 하면 모든 다이제스트 사이클에서 감시된 식이 실행됩니다.이는 최적의 상태가 아니며 눈에 보이는 성능 저하를 일으킬 수도 있고 일으키지 않을 수도 있습니다.어쨌든 앵글이 하는 일이니까 그렇게 나쁘진 않을 거야

, 「」를 합니다.$translate★★★★★★★★★★★★★★★★★★:

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

이 문장은 컨트롤러 활성화 시 변환만 할 뿐 언어의 런타임 변화는 검출하지 않습니다.하려면 , 「 」의 「 」를 들을 수 .$rootScope " event event::$translateChangeSuccess거기서도 같은 번역을 실시합니다.

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

할 수 .$translate및 service 및 service in method(컨트롤러 내의 method( 내) 콜)$translateChangeSucess청취자

즉, Angular-translate는 이벤트 기반 시스템에서 식을 감시하고 있으며, 바인딩이나 양방향 바인딩의 다른 경우와 마찬가지로 데이터가 취득되었을 때 이벤트가 발생하며 값이 변경되어 변환에는 분명히 작동하지 않습니다.번역 데이터는 페이지의 다른 동적 데이터와 달리 사용자에게 즉시 표시되어야 합니다.페이지가 로드된 후 팝업 할 수 없습니다.

이 문제를 성공적으로 디버깅할 수 있더라도 더 큰 문제는 관련된 개발 작업이 크다는 것입니다.개발자는 사이트의 모든 문자열을 수동으로 추출하여 .json 파일에 넣고 문자열 코드(이 경우 'pageTitle')로 수동으로 참조해야 합니다.대부분의 상업 사이트에는 이러한 일이 일어나야 하는 수천 가지 조건이 있습니다.그리고 그것은 시작에 불과하다.이 시점에서는 번역의 기반이 되는 텍스트가 변경되었을 때 번역의 동기화를 유지하는 시스템, 다양한 번역자에게 번역 파일을 송신해 빌드에 재통합하는 시스템, 번역자가 자신의 변경을 컨텍스트에서 확인할 수 있도록 사이트를 재구현하는 시스템 등이 필요합니다.

또, 이것은 「바인딩」이벤트 베이스의 시스템이기 때문에, 페이지상의 모든 문자열에 대해서 이벤트가 기동됩니다.이것에 대량의 이벤트를 추가하기 시작하면, 페이지상의 모든 액션이 느려질 수 있습니다.

어쨌든 후처리 번역 플랫폼을 사용하는 것이 더 의미가 있습니다.글로벌화 사용예를 들어, 번역자는 사이트의 한 페이지로 이동하여 해당 페이지의 텍스트를 해당 언어로 직접 편집할 수 있습니다.https://www.globalizeit.com/HowItWorks 입니다.프로그래밍은 필요 없습니다(프로그래밍으로 확장 가능하지만), Angular와 쉽게 통합됩니다.https://www.globalizeit.com/Translate/Angular, 페이지 변환은 한 번에 이루어지며 항상 페이지의 초기 렌더링과 함께 번역된 텍스트가 표시됩니다.

완전 공개:저는 공동 창업자입니다:)

언급URL : https://stackoverflow.com/questions/20540877/correct-use-for-angular-translate-in-controllers