Angular-translate: Set custom loader option from controller

Question

Today, I have an config for the translateProvider looking like this:

App.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.preferredLanguage('en-US');
  $translateProvider.useLoader('TranslationLoader', { versionIdentifier : 127} );
  $translateProvider.useMissingTranslationHandler('MissingTranslationHandler');
}]);

The problem is that I don't know the value of the formIdentifier-option at configuration time. I get this value after resolving the first state in ui-route. I've tried to set the translationProvides loader in the state's controller, but realized that that's not possible :)

Any ideas?

Answer 1

angular-translate allows you to use any service as a loader as long as it meets a desired interface. But it doesn't restrict you in ways of how you pass additional parameters to the loader. So, you may pass them just like you want.

For example, you can set additional parameters directly to the loader. Just implement setters for them on top of your loader:

module.factory('Loader', [
'$q',
function($q) {

    var myParam;

    var loader = function(options) {
        var allParams = angular.extend({}, { myParam: myParam }, options);
        var deferred = $q.defer();

        // load stuff

        return deferred.promise;
    };

    loader.setMyParam = function(param) {
        myParam = param;
    };

    return loader;
}])

Also, you may try to set these parameters with some helper service (either sync or async:

module.factory('SyncLoader', [
'$q', '$injector',
function($q, $injector) {

    var loader = function(options) {
        var helper = $injector.get(options.helper);

        var myParam = helper.getMyParam();

        var deferred = $q.defer();

        // load stuff

        return deferred.promise;
    };

    return loader;
}]);

or

module.factory('AsyncLoader', [
'$q', '$injector',
function($q, $injector) {

    var loader = function(options) {
        var helper = $injector.get(options.helper);

        var deferred = $q.defer();

        helper.getMyParam()
            .then(function success(myParam) {
                // load stuff
            }, function error() {
                // fail, probably
            });

        return deferred.promise;
    };

    return loader;
}]);

Also, it might be possible to use events somehow. Or, maybe, there are some other ways possible. It depends on a specific architecture.