Symfony2和Angular.JS之间共享的翻译

以下是使用自定义角度过滤器来简化标记的建议

.HTML：

<div ng-app="myApp" ng-controller="MainCtrl">
    {{ item |translate }}
</div>

.JS

var words={
    'fr': {'Bus': "AutoBus"}  
};
var app = angular.module('myApp', []);
app.constant('lang','fr');
app.factory('wordService',function(lang){   
    return {
        getWord:function(val){
            return words[lang][val];
        }
    }
})
app.filter('translate', function(wordService){
    return function(val){
        return wordService.getWord(val)
    }
})
app.controller('MainCtrl', function($scope) {
  $scope.item = 'Bus';
});

您可以使用服务从服务器或本地存储请求翻译文件（如果它们已经存在）。只需在运行时设置语言即可。

您可以重新配置单词对象的任何适合您在两个应用程序中使用它的方式。

演示

进一步研究

这是我的应用程序：

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

这是我的控制器：

'use strict';
myApp.controller('PageController',
    function PageController($scope, translationService, $rootScope) {
        $rootScope.currentLanguage = 'en';
        $rootScope.translations = translationService.getTranslations($scope.currentLanguage);
        $scope.setLanguage = function(language) {
            if (language === $scope.currentLanguage) {
                 return;
            }
            $rootScope.currentLanguage = language;
            $rootScope.translations = translationService.getTranslations($scope.currentLanguage);
        }
    }
);

这是翻译服务：

'use strict';
myApp.service('translationService', function ($http, $q) {
    var translationsCache = {};
    return {
        getTranslations: function(language) {
            if (translationsCache[language]) {
                return translationsCache[language];
            }
            var deferred = $q.defer();
            // **** FAKE SOLUTION **** //
            // I just return a resolve here as it doesn't really matter for this test.
            if (language == 'sv') {
                deferred.resolve({
                    "My first text unit": "Detta är min första text unit",
                    "I am a Pirate": "Jag är en Pirat"
                });
            } else if (language == 'en') {
                deferred.resolve({
                    "My first text unit": "This is my first Text unit",
                    "I am a Pirate": "I'm a Pirate"
                });
            }
            translationsCache[language] = deferred.promise;
            return deferred.promise;
            // **** END FAKE SOLUTION **** //
            /* 
            // **** WORKING SOLUTION **** //
            The probable real solution to fetching language JSON generated by Symfony somewhere
            $http({method: 'GET', url: '/translations/'+language}).
                success(function (data, status, headers, config) {
                    deferred.resolve(data);
                }).
                error(function(data, status, headers, config) {
                    deferred.reject(status);
                });
            translationsCache[language] = deferred.promise;
            return deferred.promise;
            // **** END WORKING SOLUTION **** //
            */
        }
    }
});

因此，这是我经过一些尝试和错误后提出的指令：

myApp.directive('translation', function($rootScope) {
    return {
        restrict: 'A', // Restrict to attribute
        replace: true, // Replace current object by default, not for input though, see solution below
        link: function(scope, element, attrs, controller){
            // This will watch for changes in currentLanguage in your $rootScope
            scope.$watch(function() {
                return $rootScope.currentLanguage; // If this changes then trigger function (binding)
            }, function(newVal, oldVal) {
                // As we have translation as a promise this is how we do
                $rootScope.translations.then(function(translations) {
                    // Does it exist, then translate it, otherwise use default as fallback
                    if (translations[scope.translation]) {
                        // Just some extra I found could be useful, set value if it is a button or submit. Could be extended.
                        if (element.prop('tagName') === 'INPUT' && (element.prop('type') === 'button' || element.prop('type') === 'submit')) {
                            return angular.element(element).val(translations[scope.translation]);
                        }
                        // Else just change the object to be the new translation.
                        return element.html(translations[scope.translation]);
                    }
                    // This is the fallback, and same as above, button and submit
                    if (element.prop('tagName') === 'INPUT' && (element.prop('type') === 'button' || element.prop('type') === 'submit')) {
                        return element.val(scope.translation);
                    }
                    return element.html(scope.translation);
                });
            });
        },
        scope: {
            translation: "@" // Save the parameter to the scope as a string
        }
    }
});

以下是如何使用它的一些示例。

.HTML：

<div class="container">
    <div class="nav">
        <button ng-click="setLanguage('en')">
            <trans translation="English" />
        </button>
        <button ng-click="setLanguage('sv')">
            <trans translation="Svenska" />
        </button>
    </div>
    <hr />
    <p><trans translation="I am a Pirate" /></p>
    <p><trans translation="A text unit that doesn't exist" /></p>
    <p><input type="button" translation="My button" /></p>
</div>

这将使用 jsFiddle 按如下方式工作：http://jsfiddle.net/Oldek/95AH3/4/

这解决了：

• 异步获取翻译
• 缓存翻译，所以切换真的很快
• 使用带值的输入/字段
• 将语言存储在本地存储中
• 在翻译更改时动态更新整个 DOM
• 真的很快，至少我尝试过的规模
• 常见问题的完整和有效的解决方案

要解决的问题：

• 移出检查它是否是其他地方的输入字段的代码
• 多元化
• 输入占位符
• 以及翻译支持的其他功能。
• 支持参数，请参见示例：

<trans translation="Hello {{name}}" name="{{name}}">

• 使用 xgettext？ 扫描项目，并生成可以在某些软件中翻译的 YML 或类似结构。
• 删除临时解决方案并使用注释掉的工作解决方案。

其他评论

如果您有问题，请随时提问，我会提供信息，并且可能很快就会在认为需要的一段时间内提供jsFiddle。

/马库斯

我最终使用了这个解决方案。解决了我所有的问题：

http://cliffmeyers.com/blog/2013/3/11/integration-angularjs

所以我走得更远，经过一些研究，为此操作使用过滤器更有意义，但是我似乎无法让它按我的预期工作。

所以这就是我得到的应用程序：

var app = angular.module('app', []);
app.factory('translationsService', function($http, translations, $q) {
    return {
        getTranslations: function(lang) {
            var deferred = $q.defer();
            $http({method: 'GET', url: '/translations/'+lang}).
                success(function (data) {
                    deferred.resolve({
                        data: data,
                        getWord: function(word) {
                            return data[word] ? data[word] : word;
                        }
                    });
                });
            return deferred.promise;
        }
    }
});
app.factory('wordService', function(translationsService, $q){
    return {
        lang: 'en-us',
        getWord: function(val){
            var translations = translationsService.getTranslations(this.lang);
            var deferred = $q.defer();
            translations.then(function(data) {
                deferred.resolve(data.getWord(val));
            });
            return deferred.promise;
        }
    }
});
app.filter('translate', function(wordService){
    return function(val){
        return wordService.getWord(val);
    }
});

因此，如果我现在在 html 页面中执行此操作：

{{ "User" | translate }}

然后我最终陷入了一个无休止的循环。我是否把整个$q/承诺的事情弄错了？请在这里获得一些帮助。

但是，如果我通过将其分配给控制器中的值来使用它，它可以正常工作。

在控制器中，我执行以下操作：

app.controller('PageController',
    function PageController($scope, wordService) {
         $scope.someValue = wordService.getWord("USER");
    }
);

然后在 html 中使用它：

{ someValue }}

而且效果很好。

/马库斯