javascript - 如何使用 AngularJs 将网站转换为多语言

Question

我的方法是，当我在 Angular 模板上应用元素时，它会翻译一次，但当我应用多个指令作为模板进行多次 api 调用时，如何避免它。 好的解决方案请评论

    var directive = {
        restrict: 'AE',
        scope: false,
        multiElement: true,
        link: link
    };
    $rootScope.cityName = cookieService.getCookie('lang');
    $rootScope.translateThese = [];
    $rootScope.translationData = '';
    $rootScope.translationCounter = 0;

    function link(scope, element, attr) {

        scope.$evalAsync(function() {
            $rootScope.translateThese.push(element[0]);

            scope.$on('translateAPISuccess', function(e, data) {
                angular.forEach($rootScope.translateThese, function(elem) {
                    var translatedString = $rootScope.translationData[elem.innerHTML.trim().toLowerCase()];
                    elem.innerHTML = translatedString;
                    // $compile(element.contents())(scope);
                })
            })
        });

        // This is a 0 second timeout to push the execution of this
        // directive to the next digest cycle where all the dynamic values
        // are present. I can also use scope.$evalSync for this purpose.
        // 
        // @example
        // $timeout(function() { 
        //
        $timeout(function() { // We could also use scope.$watch here watching $viewContentLoaded // scope.$watch('$viewContentLoaded', function(e, u) {
            $rootScope.translationCounter++;
            var translateThese = [];
            // if (scope.$last === true && scope.translationCounter === $rootScope.translateThese.length) { //we can use this but scope.$last isn't working
            if ($rootScope.translationCounter === $rootScope.translateThese.length) {
                $rootScope.translateThese.forEach(function(sentence) {
                    // trim.apply(sentence).split(" ").forEach(function(v) {
                        translateThese.push(sentence.innerHTML.replace(/[^a-zA-Z ]/g, ""));
                    // })
                })
                dataService.staticTranslation('guj', translateThese).then(function (response) {
                    $rootScope.translationData = response.response;
                    scope.$emit('translateAPISuccess', response.response);
                    // When using the translateAPI from horizontal
                    // $rootScope.translationData = JSON.parse(response.response).StaticLangTranslationApplicationResponse.StaticLangTranslationApplication.translations;
                    // scope.$emit('translateAPISuccess', JSON.parse(response.response).StaticLangTranslationApplicationResponse.StaticLangTranslationApplication.translations);
                });
            }
        });
    }

    return directive;
}

Answer 1

您可以查看使用 Angular Translate 服务:https://github.com/angular-translate/angular-translate

它提供了用于翻译您的内容的过滤器、指令和服务。