CODEWITHSUNDEEP
javascriptphpangularjs
Jay Prakash Singh
Jay Prakash Singh

Reputation: 89

How to convert website into multi language using AngularJs

My approach is this it is translating one time when i applied on element on angular template but when i applied multiple directive as template making multiple time api call so how to avoid it. good solution please comment 

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

Upvotes: 0

Views: 582

Answers (1)

itsphilz
itsphilz

Reputation: 455

You could look at using the Angular Translate service: https://github.com/angular-translate/angular-translate

It offers a filter, directive and service for translating your content.

Upvotes: 1

Related Questions