在html渲染之前包含指令

Question

我试着绕过以下问题：

1. 我有一个html字符串，我使用ng-bind-html
呈现
2. 我设法用指令（或更多）更改给定的占位符（在html字符串中）。例如，我有[placeholder]test[/placeholder]并替换为<my-directive></my-directive>以获得某种功能。

需要这种方法才能使某些内容动态化。

当渲染html字符串时，我注意到该指令缺失，我明白了，但有没有办法渲染它并使指令在功能上生效？

P.S：

• 尝试将其渲染为普通字符串，但html已转义
• 使用$sce.trustAsHtml()
尝试
• 由于未触发指令，我无法应用$compile(element.contents())(scope);

Answer 1

我通过以下方式成功实现了这一目标：

1. 在html中添加指令：

   <my-directive update-data-trigger="someObject.content" data="someObject"></<my-directive>

2. 指令：

app.directive("myDirective", function ($compile) { return { replace:true, restrict: "E", scope: { //Data holds the html in the content attribute data: '=', updateDataTrigger: '=' }, link: function ($scope, element) { //Add a watcher to refresh data because the loaded data passed is async $scope.$watch('updateDataTrigger', function(){ //Check if data passed has been loaded with our desired object if($scope.updateDataTrigger != null) { //Do some content manipulation here //Append directives to the content as well //render as html element.html(data.content); $compile(element.contents())($scope); } }); } } });