angular 1 filter translation

Question

I run filter inside ng-repeat for translation each row. I send to the filter 3 parameters :

The string that need to be translated (for default return).
The event id(the strings belongs to this event).
The language-code(preferred by user).

The filter send data to the service with 2 parameters :

The language -code.
The event id(the strings belongs to this event).

The server response is includes the translated string.

The problem is that I cannot get the response out of the "then function". I tried to use promises and $q resolve and still no succsess.

The code:

//* Filter translate this *//
app.filter('translateThis', ['$q', 'translateEvents', function ($q,     translateEvents) {
    var pending = {};
    // FILTER WRAPPER TO COPE WITH ASYNCHRONOUSLY
    return function(item, eventId, lngCode) {
        // check if eventId it exits and it must to be integer
        var check = isInt(eventId);
        if (check == false) {
            return item;
        }
        if ($localStorage.doTranslateEvents == 2) {
            if ( !(item in pending) ) {
                pending[item] = null;
                translateEvents.translate(lngCode, eventId).then(function (response) {
                    console.log(response.data);// i get the data here !
                    pending[item] = response.data;
                });
            }
            console.log(pending[item]);// i do not get it here !
            return pending[item] || item;
        } else {
           return item;
        }
    };
}

/* the following service is responsible to translate events
* finally this service returns promise.
*/
    app.service('translateEvents',['$q', '$localStorage', '$http', 'rootUrl', '$rootScope', '$timeout', function ($q, $localStorage, $http, rootUrl, $rootScope, $timeout) {
    return {
        translate : function (toLanguageCode, eventId) {
            /* 
             * Then we do lng from and lang to validation and set defaults.
            */
            if (eventId != null || eventId != undefined) {
                if (toLanguageCode != 'en' && toLanguageCode != 'he' && toLanguageCode != 'ru' && toLanguageCode != 'es' && toLanguageCode != 'tr' && toLanguageCode != 'de' && toLanguageCode != 'fr' && toLanguageCode != 'it' && toLanguageCode != 'nl' && toLanguageCode != 'gan' && toLanguageCode != 'zh' && toLanguageCode != 'ja' && toLanguageCode != 'no' && toLanguageCode != 'ko' && toLanguageCode != 'pt' && toLanguageCode != 'tlh' && toLanguageCode != 'ar') {
                    toLanguageCode = 'en';
                }
                return $http.get("https://xxx?id=" + eventId + "&lng=" + toLanguageCode);
            } else {
                return null;
            }
        }
    }
}]);

I do not understand what I am doing wrong.

I knew it's filter.I'm asking you show the full code. What are the code you have. — Manikandan Velayutham, Jan 18 '17 at 12:43
There is a well-known [library in Angular 1 for translation](https://github.com/angular-translate/angular-translate) (it's almost native, that popular). It supports asynchronous filter etc. I would highly recommend to use this library instead of writing your own filter. — ssc-hrep3, Jan 18 '17 at 17:38

score 0 · Answer 1 · edited May 23 '17 at 12:08

I like to think that you shouldnt use asynchronous filters. They introduce more state and pushes logic away from services and controllers.

Angular depends on filters returning simple objects or returning easily printable data types. Promises are neither of that. Until Angular1.2 you could just change the value in a promise and the UI would update.

As of Angular 1.3 filters are not updated that often therefore the displayed data only changes if your input changes. You could use filter.$stateful=true to inform angular that your filter needs updating but this is discouraged.

This answer in another thread is a good read on this https://stackoverflow.com/a/27771259/1408733

angular 1 filter translation

1 Answers1