Angularjs 1.3 async filter not working

Question

I have following code, which basically loads messages from the server via $http.get request in the service and then used in the i18n filter. Filter was working fine with angular version 1.2.24 but after updating to 1.3.5 it no longer works.

I was wondering if anyone ran into similar issue and can shine some light on this.

var module = angular.module('myApp', [])

.factory('MessageFactory', function ($http, $locale, $log) {
    var messages = {};

    $http.get("/i18n/" + $locale.id + "/list", {cache: true}).success(function(data) {
        $log.debug("Getting messages for", $locale.id);
        messages = data;
    });

    return {
        getMessage: function (key) {
            return messages[key];
        }
    }
})

.filter('i18n', function (MessageFactory) {
    return function (key) {
        return MessageFactory.getMessage(key);
    }
});

Html Code

<h2>{{'message.page.title'|i18n}}</h2>

anazimok · Accepted Answer · 2014-12-11 01:33:25Z

10

Finally after couple of hours of digging I changed

.filter('i18n', function (MessageFactory) {
    return function (key) {
        return MessageFactory.getMessage(key);
    }
});

to

.filter('i18n', function (MessageFactory) {
    function filterFn(key) {
        return MessageFactory.getMessage(key);
    }

    filterFn.$stateful = true;

    return filterFn;
});

Notice filterFn.$stateful that's what did the trick.

answered Dec 11, 2014 at 1:33

anazimok

1,7593 gold badges20 silver badges33 bronze badges

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

1 Comment

Rasalom Over a year ago

didn't knew this, nice.

Rasalom · Accepted Answer · 2014-12-10 14:57:34Z

0

I couldn't find docs proof of that, but it looks like angular 1.3.x executes code inside modules only when it firstly used, and <= 1.2.x do it when app started.

Looks like you need to change your code to load locale files in app.run() method;

Something like this: http://codepen.io/anon/pen/vELogx

answered Dec 10, 2014 at 14:57

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

1 Comment

anazimok Over a year ago

Tried that, the problem with the "run" approach is that the exception is thrown inside MessageFacotry.getMessage while messages is null. As soon as data from the $http.get is returned the filter works as expected.

Collectives™ on Stack Overflow

Angularjs 1.3 async filter not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related