从过滤器返回的结果中应用指令答案

【问题标题】：Applying a directive from a result returned from a filter从过滤器返回的结果中应用指令
【发布时间】：2016-05-22 17:03:08
【问题描述】：

<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/>，这只是一个例子。

【问题讨论】：

ng-bind-html 不打算插入角度指令，只是原始 html。还有许多其他相关的帖子与解决方法有关。如果是我，我会使用我自己的指令，然后你可以自己编译

标签： javascript angularjs angularjs-directive angularjs-filter

【解决方案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);
      }
    }
  }
]);

我不知道这是否是使用指令的最佳实践，但至少它有效

如果有人有更好的答案，我将不胜感激！

【讨论】：