AngularJS filter depending on asynchronous call

Question

I am currently trying to learn how to use Angular and I was tasked with rewriting an existing functional page to use Angular.

One of our core functionalities lies with translating strings with a JavaScript function, however, this translate method is only supposed to be called after the translations strings are loaded into the script, and that loading is done asynchronously.

We currently use callbacks to achieve this behavior, but due to Angular nature (at least in my understanding) my data is displayed as soon as the page is rendered.

I have the to be translated strings, but I wanted to display the translated strings in my table, and for that I tried creating a filter "translate" that would call my existing translate method and return its value. What I believe it's happening is that at the moment the filter gets called, I still don't have the translation strings yet, as they may not be loaded already.

What I expected was to something like {{ object.name | translate }}, where object.name is a to be translated string like "access.granted", to give me the corresponding translation string for a given language, for instance "You were given permission to access this area.".

I am not positive this is the best way to achieve what I want, I haven't had much time to delve deep into angular yet, but one requirement I have is, I cannot change the way translations are dealt with, since we have a huge system already using that code, and the new pages using angular must be fully compatible.

What I have tried: (my current filter code)

function ngTranslate (text, backoff) {
    if (backoff != undefined)
        backoff = 100;
    if (backoff > 5000)
        backoff = 5000;

    if (internationalization != undefined && Object.keys(internationalization.messages).length > 0)
        return translate(text);

    setTimeout(function () {
        return ngTranslate(text, backoff * 2);
    }, backoff);
}

app.filter("translate", function ($log) {
    return function (key) {
        $log.info(key);
        return ngTranslate(key);
    };
});

What I tried to achieve here was verify if the translations strings are already loaded, and if not, try again in a short time, but even after the translation strings loaded, nothing showed on the table.

Here is my table code:

<tr data-ng-repeat="product in productList">
    <td>{{ product.name | translate }}</td>
</tr>

Thanks a lot in advance

i think you don't need to do the timeout. just translate the string with {{ product.name | translate }}. when the product.name change the translation will be updated automatically — AlainIb
– AlainIb, Commented Jul 1, 2016 at 22:35
thanks, the product.name shouldn't change though, it's a json sent by the server and it's not editable, a product should be checked or unchecked. This might be my next question here though — Uriel Bertoche
– Uriel Bertoche, Commented Jul 1, 2016 at 22:45

WalksAway · Accepted Answer · 2016-07-01 22:30:51Z

1

well, one of the ways i can think of, is to bootstrap your module, load the strings and then manually start the angular app in the callback function

Use this function to manually start up angular application

https://docs.angularjs.org/api/ng/function/angular.bootstrap

That way you can insure all the translation strings will be loaded before you initialize your app.

answered Jul 1, 2016 at 22:30

WalksAway

2,8292 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Uriel Bertoche Over a year ago

well, thanks a lot! have not tried to do this yet, but this is exactly what I was looking for right now. I was trying to achieve this by some weirder and darker means. loading the angular js and my module js with ajax on the callback. I like your way better.

Collectives™ on Stack Overflow

AngularJS filter depending on asynchronous call

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related