Angular-translate 其中翻译包含指令

Question

是否可以在 t运行slation 值中嵌入 angular-js 指令？通过使用 t运行slate 指令或服务而不是过滤器，我很容易就能正确显示嵌入的 HTML，并且还使用 t运行slate 获取动态值-具有 t运行slate-value 属性的指令。

我只是运行遇到一个问题，其中 t运行slation 项目包含一个嵌入元素，该元素标有 angular 弹出库指令的属性（这样您就可以将鼠标悬停在单词并有一个小的工具提示弹出窗口） - 当使用 t运行slate-filter 正确地将 t运行slated 值应用到页面时，当鼠标悬停在 span 元素上时没有弹出任何内容;看起来嵌入式弹出指令似乎没有激活。

示例 plunker - https://embed.plnkr.co/YJh8W9TgHknnqvXmBAym/

这对 angular-t运行slate 是不可能的，还是我们目前使用的 popover 库的缺点？

谢谢！

Answer 1

更新 2016-08-09

这是一个更新版本，它 1) 允许使用 translate-value-* 属性，并且 2) 删除范围隔离，以便翻译后的值可以引用范围项。 (2) 的示例用例类似于以下翻译：

{ "KEY": "A sentence <a ng-click='doPopUp()'>that uses the controller scope.</a>" }

更新后的指令是：

.directive("translateCompile", ['$compile', '$rootScope', '$translate', function($compile, $rootScope, $translate){
    return{
        restrict: 'A',
        scope: false,
        link: function(scope, element, attributes) {
            function doCompile() {
                var props = {}, key = '';

                // Loop through the attributes of the element, looking for the key to use in translation as
                // well as any translate-values to be passed along
                angular.forEach(attributes, function(a,b) {
                    if (b.startsWith('translateValue')) {
                        // This normalize the translation property name to lowercase; if you expect
                        // to be able to use {{camelCase}} in translation replacements, you'll want to
                        // make this smarter about just lowercasing the first character.
                        props[b.replace('translateValue', '').toLowerCase()] = a;
                    }
                    else if (b == 'translateCompile') {
                        key = a;
                    }
                });

                // Wrap the contents in a span to make sure $compile will successfully operate
                var txt = '<span>' + $translate.instant(key, props) + '</span>';

                // Compile the translated content and set it as the element's HTML
                $compile(txt)(scope, function(cloned, scope) {
                    element.empty();
                    element.append(cloned);
                });
            }

            // Watch for translation changes, to regenerate
            $rootScope.$on('$translateChangeSuccess', doCompile);

            // Do initial compilation
            doCompile();
        }
    }
}]);

原版

所以，在玩了几天之后，我最终确定了一个修改版本来实现一个在网络上弹出的 "compile" 指令：

    .directive("translateCompile", ['$compile', '$rootScope', '$translate', function($compile, $rootScope, $translate){
        return{
            restrict: 'A',
            scope:{
                translateCompile:'@'
            },
            link: function(scope, element, attributes) {
                function doCompile() {
                    // Wrap the contents in a span to make sure $compile will successfully operate
                    var txt = "<span>" + $translate.instant(scope.translateCompile) + "</span>";

                    // Compile the translated content and set it at the element's HTML
                    $compile(txt)(scope, function(cloned, scope) {
                        element.html(cloned);
                    });
                }

                // Watch for translation changes, to regenerate
                $rootScope.$on('$translateChangeSuccess', doCompile);

                // Do initial compilation
                doCompile();
            }
        }
    }]);

... 允许这样使用 <h3 translate-compile="SOME_KEY"></h3>。不确定是否有可能完全简化它（或者我是否在某处做了一个禁忌），但到目前为止似乎可以解决问题。

Angular-translate 其中翻译包含指令

Angular-translate where translation contains directives

html

javascript

angularjs

angular-translate