包含HTML之前指令渲染

Question

我試着包裝我圍繞以下問題頭：

1. 我有我渲染使用ng-bind-html
2. 我設法改變一個給定的佔位符（HTML中的字符串）一個HTML字符串與指令（或更多）。例如，我有：[placeholder]test[/placeholder]，並用<my-directive></my-directive>取代某個功能。

這種方法需要使某些內容動態化。

當呈現html字符串時，我注意到該指令丟失，我明白，但有沒有辦法來呈現它並使指令功能？

PS：

• 試圖渲染它作爲一個正常的字符串，但是HTML轉義
• 使用$sce.trustAsHtml()
• 嘗試，因爲該指令不會被觸發

Answer 1

我我不能申請$compile(element.contents())(scope);設法做到這一點做到以下幾點：

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