應用從一個過濾器

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

來源

2016-05-22 kitlee

'ng-bind-html'不是用來內插角度指令，只是原始的html。有很多其他相關的帖子關於這個變通辦法。如果是我，我會使用我自己的指令，而不是你自己編譯 – charlietfl

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

我不知道它是否在使用該指令的最佳實踐，但至少它的工作原理

如果有人有更好的答案，我將不勝感激！

來源

2016-05-23 05:27:56 kitlee

應用從一個過濾器

回答

相關問題