変換にディレクティブが含まれている角度変換

Question

変換値に埋め込まれたangular-jディレクティブを含めることは可能ですか？私は、フィルタの代わりにtranslateディレクティブまたはサービスを使用し、translate-value属性を持つtranslate-directiveを使用して動的値を取得することで、埋め込みHTMLを正しく表示できるようになりました。

私はちょうど、翻訳アイテムに角度ポップオーバーライブラリディレクティブの属性がマークされた埋め込み要素が含まれている問題に直面しました（スパン内の単語にマウスを合わせると小さなツールチップポップアップを表示できるようになりました）翻訳された値をページに適切に適用した翻訳フィルタを使用している間に、スパン要素をマウスで操作すると何もポップアップしません。埋め込まれたpopoverディレクティブはアクティブではないようです。

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

はこれが翻訳し、角度、あるいは我々が現在使用しているポップオーバーライブラリの欠点では不可能ですか？

ありがとうございます！

Answer 1

UPDATEここでは2016年8月9日

1）*変換、付加価値の使用を可能にする属性、及び翻訳値はスコープ・アイテムを参照することができるように、2）スコープ分離を削除更新バージョンです。数日間の周りにプレーした後、

ので

.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(); 
     } 
    } 
}]); 

ORIGINAL：

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

更新ディレクティブは次のとおりです。（2）の使用例の場合には、以下の翻訳のようなものです私は最終的に、Web上でポップアップする "コンパイル"命令を実装した修正版に着手しました。

.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>。これをすべて単純化することが可能かどうか（または私がどこかでno-noを行ったかどうか）は分かりませんが、これまでにこのトリックを行うようです。