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

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

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

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

1 个答案: