angular-translate reloading of static files when static files updated?

Question

I am using CKEditor in conjunction with AngularJS for inline editing (using contenteditable).

On blur of the CKeditor, an $http request goes up to the server and updates the database, specifically the translation key/value pair of the related string that was just modified.

On the server, right after the string update in the DB, a build system is triggered and the [lang].json (static file) is rewritten by polling the database.

How can tell angular-translate to then reload the [lang].json?

I've seen a bunch of pages talking about partial reloading, but I did not find any information on static files reloading.

Here's what the directive does.

.directive('frontOfficeEdit', [

    // RESTIntranet IS AN ANGULAR FACTORY COMMUNICATING WITH THE REST API

    '$rootScope',
    '$parse',
    'RESTIntranet', 
    '$translate', 
    '$filter', 
    function (
        $rootScope, 
        $parse, 
        RESTIntranet, 
        $translate,
        $filter
    ) {

    var counter = 0,
    prefix = '__ckd_';


    return {
        restrict: 'A',
        link: function (scope, element, attrs, controller) {


            // editMode IS A BOOLEAN DECLARED INTO THE DIRECTIVE'S PARENT $scope.
            scope.$watch('editMode', function(newVal, oldVal) {


                if (!newVal) // IF editMode IS SET TO FALSE (OFF)
                {
                    // REMOVE contenteditable FROM ELEMENT
                    attrs.$set('contenteditable', false);

                    // DESTROY ALL CKEDITOR INSTANCES AS SOON AS USER TURNS OFF editMode IN THE GUI. 
                    // THERE CAN BE MULTIPLE CKEDITOR INSTANCES ON THE SAME PAGE, SO, TO MAKE SURE, DESTROY ALL.
                    for(name in CKEDITOR.instances)
                    {
                        CKEDITOR.instances[name].destroy();
                    }
                    return;
                }

                else // ELSE, editMode IS SET TO TRUE (ON)
                {
                    var getter = $parse(attrs.frontOfficeEdit), 
                        setter = getter.assign;

                    attrs.$set('contenteditable', true); // inline ckeditor needs this

                    if (!attrs.id) {
                        attrs.$set('id', prefix + (++counter));
                    }



                    var options = {};

                    // ON BLUR, SAVE CKEDITOR'S CONTENT TO REMOTE DB (REST API)
                    options.on = {
                        blur: function (e) {
                            if (e.editor.checkDirty()) {
                                var ckValue = e.editor.getData();

                                // TRANSLATE IT?
                                ckValue = $filter('translate')(ckValue);

                                scope.$apply(function () {
                                    console.log('--->@{369} ckValue is going to be inserted/updated in DB through service : ');
                                    console.log(ckValue);

                                    // CB FRAMEWORK INTRANET REST API CALL
                                    RESTIntranet.saveContent(ckValue, attrs.stringid, attrs.stringname);

                                    // UPDATE THE STRING IN STRINGS (JSON)
                                    current_language = $translate.use();
                                    curlang_caps = current_language.toUpperCase();
                                    stringname = attrs.stringname;


                                    // THIS ENSURES THAT SCOPE'S OBJECT IS SET TO THE PROPER VALUE, EVEN ONCE CKEDITOR ARE DESTROYED
                                    /*
                                    ————————— BUT THEN, IF I CHANGE FROM EN TO FR, AND THEN GO BACK TO FR, THE TEXT IS AS BEFORE
                                    */
                                    setter(scope, ckValue);


                                });
                                ckValue = null;
                                e.editor.resetDirty();
                            }
                        }
                    };

                    options.extraPlugins = 'sourcedialog,find';
                    options.removePlugins = 'sourcearea';                   

                    var editorangular = CKEDITOR.inline(element[0], options); //invoke

                    scope.$watch(attrs.frontOfficeEdit, function (value) {
                        // TRANSLATE IT?
                        value = $filter('translate')(value);

                        editorangular.setData(value);
                    });

                } // - EOF - else

            }, true); // - EOF - scope.$watch('editMode', function(newVal, oldVal) {

        }
        // - EOF - link
    }
    // - EOF - return
}]);

I don't have enough javascript experience to know where to hook into and how (not enough experience with async stuff yet). Thanks.

Answer 1

I think you just need to do a $translate.refresh()

https://github.com/angular-translate/angular-translate/blob/a2ac7000f94bcee6dd8e206cab5d7cec3527dd25/src/service/translate.js#L1584

   * @description
   * Refreshes a translation table pointed by the given langKey. If langKey is not specified,
   * the module will drop all existent translation tables and load new version of those which
   * are currently in use.
   *
   * Refresh means that the module will drop target translation table and try to load it again.
   *
   * In case there are no loaders registered the refresh() method will throw an Error.
   *
   * If the module is able to refresh translation tables refresh() method will broadcast
   * $translateRefreshStart and $translateRefreshEnd events.
   *
   * @example
   * // this will drop all currently existent translation tables and reload those which are
   * // currently in use
   * $translate.refresh();
   * // this will refresh a translation table for the en_US language
   * $translate.refresh('en_US');