Angular Translate - Обновление переводов, выполняемых через $ tranlate.instant() в контроллере во время выполнения

Я использую angular-translate и пытаюсь изменить языки во время выполнения (без обновления страницы) с помощью меню выбора (on-change). Тем не менее, передняя часть приложения, над которым я работаю, получает свой текст из переводов, выполненных с помощью метода $translate.instant(), поэтому, когда я выполняю изменение языка через $translate.use(langKey);, он не влияет на текст, поступающий из контроллера.

Это делает работы, когда переводы выполняются с помощью HTML-разметки, используя либо директиву или фильтр, но я работаю на относительно большого существующей кодового и пытаюсь спасти себя массивную работу рефакторинга все, чтобы двигаться переводы в разметку.

Мой код контроллера находится ниже, и я также создал Plunker продемонстрировать проблему (хотя и с кнопки вместо выпадающего списка, но проблема та же): http://plnkr.co/edit/ohzN9G

UPDATE: Мне действительно удалось получить эту работу на основе этого решения: angular translate update translation table. Тем не менее, моя версия включает в себя использование $watch для каждого контроллера, который является дорогостоящим с точки зрения производительности, и все равно будет требовать приличную сумму рефакторинга для реализации на всех контроллерах: http://plnkr.co/edit/TjEVeX

есть более элегантный способ достижения того же результат?

var translationsEN = { 
    HEADLINE: 'What an awesome module!', 
    PARAGRAPH: 'Srsly!', 
    PASSED_AS_TEXT: 'Hey there! I\'m passed as text value!', 
    PASSED_AS_ATTRIBUTE: 'I\'m passed as attribute value, cool ha?', 
    PASSED_AS_INTERPOLATION: 'Beginners! I\'m interpolated!', 
    VARIABLE_REPLACEMENT: 'Hi {{name}}', 
    MISSING_TRANSLATION: 'Oops! I have not been translated into German...', 
    BUTTON_LANG_DE: 'German', 
    BUTTON_LANG_EN: 'English' 
}; 

var translationsDE= { 
    HEADLINE: 'Was für ein großartiges Modul!', 
    PARAGRAPH: 'Ernsthaft!', 
    PASSED_AS_TEXT: 'Hey! Ich wurde als text übergeben!', 
    PASSED_AS_ATTRIBUTE: 'Ich wurde als Attribut übergeben, cool oder?', 
    PASSED_AS_INTERPOLATION: 'Anfänger! Ich bin interpoliert!', 
    VARIABLE_REPLACEMENT: 'Hi {{name}}', 
    // MISSING_TRANSLATION is ... missing :) 
    BUTTON_LANG_DE: 'Deutsch', 
    BUTTON_LANG_EN: 'Englisch' 
}; 

var app = angular.module('myApp', ['pascalprecht.translate', ,'ngSanitize']); 

app.config(['$translateProvider', 'translationHelperProvider', function ($translateProvider, translationHelperProvider) { 
    // add translation tables 
    $translateProvider.translations('en', translationsEN); 
    $translateProvider.translations('de', translationsDE); 
    $translateProvider.preferredLanguage('en'); 
    $translateProvider.fallbackLanguage('en'); 
    $translateProvider.useSanitizeValueStrategy('sanitize'); 

    translationHelperProvider.translations = $translateProvider.translations(); 

}]); 

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

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

app.controller('Ctrl', ['$rootScope', '$translate', '$scope', 'translationHelper', function ($rootScope, $translate, $scope, translationHelper) { 

    $scope.changeLanguage = function (langKey) { 
    $translate.use(langKey).then(function() { 
     $rootScope.globalLangKey = langKey; 
    }) 

    }; 
}]); 

app.controller('InnerCtrl', ['$rootScope', '$translate', '$scope', 'translationHelper', function ($rootScope, $translate, $scope, translationHelper) { 
    $scope.translateMe = $translate.instant("HEADLINE"); 
$rootScope.$watch('globalLangKey', function (newVal, oldVal) { 
    if (newVal) { 
     $scope.translateMe = translationHelper.translations[newVal]["HEADLINE"]; 
    } 
}); 
}]); 

app.controller('AnotherInnerCtrl', ['$rootScope', '$translate', '$scope', 'translationHelper', function ($rootScope, $translate, $scope, translationHelper) { 
    $scope.translateMeAParagraph = $translate.instant("PARAGRAPH"); 
$rootScope.$watch('globalLangKey', function (newVal, oldVal) { 
    if (newVal) { 
     $scope.translateMeAParagraph = translationHelper.translations[newVal]["PARAGRAPH"]; 
    } 
}); 
}]);

MARKUP

<!doctype html> 
<html ng-app="myApp"> 
    <head> 
    <script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v0.3.1/messageformat.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-interpolation-messageformat/2.10.0/angular-translate-interpolation-messageformat.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-cookie/2.10.0/angular-translate-storage-cookie.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-local/2.10.0/angular-translate-storage-local.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-url/2.10.0/angular-translate-loader-url.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-static-files/2.10.0/angular-translate-loader-static-files.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-handler-log/2.10.0/angular-translate-handler-log.js"></script> 

    <script src="script.js"></script> 
    </head> 
    <body> 

<div ng-controller="Ctrl"> 
    <p>{{ 'HEADLINE' | translate }}</p> 
    <p>{{ 'PARAGRAPH' | translate }}</p> 


    <div ng-controller="InnerCtrl"> 
    <hr> 
    <h2>This is the new nested controller I set up as a test</h2> 
    <br> 
    I used code from within the controller to translate this: 
    <br> {{translateMe}} 
    <br> 
    <br> 
    This was done using <pre style="display: inline; font-weight: bold">translate="PASSED_AS_ATTRIBUTE</pre> approach<br> 
    <span translate="PASSED_AS_ATTRIBUTE"></span></pre> <span translate="PASSED_AS_ATTRIBUTE"></span> 
    <hr> 

    </div> 

    <div ng-controller="AnotherInnerCtrl"> 
     Here is another nested controller with the translation being executed from within the controller: <p>{{translateMeAParagraph}}</p> 
     <hr> 
    </div> 



    <button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button> 
    <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button> 
</div> 


    </body> 
</html>

источник

2017-01-11 doronorenstein