eine Richtlinie aus einem Ergebnis von einem Filter

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

Aus dem obigen Beispiel zurück Anwendung, kann ich nicht die ersten <img/> Arbeiten mit myDirective, wenn es aus dem Filter angebracht ist, während die zweiten <img/> funktioniert, da es normalerweise ursprünglich aus der kam Vorlagendatei.

Jede Workaround um die zweite <img/> funktioniert auch?

Bitte fragen Sie nicht, warum ich die <img/> auf diese Weise machen muss, es ist nur ein Beispiel.

Answer 1

Dank für die Annahme, den $compile Service @charlietfl, das ist meine Lösung:

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

Ich weiß nicht, ob es die beste Praxis ist es, die Richtlinie bei der Verwendung, aber zumindest funktioniert es

Ich werde geschätzt, wenn jemand bessere Antworten hat!