angular translate update translation table

Question

I have created a directive which wraps angular-translate and can also turns into input fields for easy Translating for admin users.

When I update a single translation I don't really want to load an entire translation table from my DB after updating 1 row in the DB, because it seems incredibly inefficient.

My problem is that I can't seem to find anything in the angular-translate API that will allow me to have access to the front-end Cache. I want to modify the translation map directly without having to bother the DB for an entire mapping of my translations after I updated 1 row successfully.

Things that I have tried: $translationCache, $translateLocalStorage, $translateCookieStorage.

Can someone enlighten me please.

Also, as a bonus, I wonder if anyone figured out where they can expose the translation mapping in angular translate. Note, I don't want the translated values from $translate in the controller because that's already interpolated.

Answer 1

A short view into the source offers no simple way for this. I solved it finally caching a reference from $translateProvider.translations using a own provider:

app.provider('translationHelper', function () {
    this.translations = {};

    this.$get = function () {
        return {
            translations: this.translations
        }
    };
});

In your app do

app.config([
    '$translateProvider',
    'translationHelperProvider',
function (
    $translateProvider,
    translationHelperProvider
) {
    translationHelperProvider.translations = $translateProvider.translations();
}]);

and use it later like

app.component('myComponent', {
    templateUrl: 'views/components/myComponent.html',
    controller: [
        'translationHelper',
    function (
        translationHelper
    ) {
        // query translation
        var translation = translationHelper.translations['de']["Your.Key.Here"];
        // modify translation
        translationHelper.translations['de']["Your.Key.Here"] = 'A new value';
    }]
});

Alternatively, you can modify the angular translate source and made 'translations' from provider accessible through its $get method.