は、上記の例からフィルタ

Question

<div data-ng-bind-html="message | myFilter"></div> <!-- it does not work --> 
<img data-my-directive src="xxx.jpg" alt="some captions"/> <!-- it works --> 


angular.module('core').filter('myFilter', ['jQuery', 
    function ($) { 
    return function (message) { 
     var $img = $('<img data-my-directive/>'): 
     $img.attr({src : 'xxx.jpg', alt : message}); 
     return $('<div/>').append($img).html(); 
    } 
    } 
]); 

angular.module('core').directive('myDirective', [ 
    function() { 
    return { 
     restrict : 'A', 
     link : function (scope, $element, attrs) { 
     $element.someJQueryPlugin(); 
     } 
    } 
    } 
]); 

から返されたそれは、もともとから来たので、二<img/>が正常に動作しながら、それは、フィルタから接続されている場合、私はmyDirectiveと最初<img/>作品を取得することはできませんテンプレートファイル。

第2の<img/>の問題を解決するための回避策もありますか？

このようにして<img/>をどうして作る必要があるのか​​尋ねないでください。それは単なる例です。 $compileサービスを示唆ため@charlietfl

Answer 1

おかげで、これは私のソリューションです：

<div data-additional-directive data-message="message"></div> 

angular.module('core').directive('additionalDirective', ['$compile', '$filter', 
    function() { 
    return { 
     restrict : 'A', 
     scope : { 
     message : '=' 
     }, 
     link : function (scope, $element, attrs) { 
     var template = $filter('myFilter')(scope.message); 
     $element.html(template); 
     $compile($element.contents())(scope); 
     } 
    } 
    } 
]); 

私はそれがディレクティブを使用してベストプラクティスであるかどうかわからないが、少なくともそれは

の作品誰かがより良い答えを持っていれば私は高く評価されます！