Применяя директиву из результата, возвращаемого из фильтра

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/> работает нормально, так как он изначально пришел из файл шаблона.

Любое обходное решение для получения второго <img/> работает также?

Пожалуйста, не спрашивайте, почему я должен сделать <img/> таким образом, это всего лишь пример.

Answer 1

Благодаря @charlietfl предложившего $compile обслуживание, это мое решение:

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

Я не знаю, является ли это лучшая практика в использовании директивы, но, по крайней мере, это работает

Я буду признателен, если у кого есть лучшие ответы!