渲染$ sce.trustAsHtml中的指令

我在这里包括一个Plunker: http ://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

我想添加一个button到DOM,点击时应执行绑定到它的function。 在这种情况下,应该提醒“testing”。 这是代码。

调节器

app.controller('MainCtrl', function($scope, $sce) { $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>'); $scope.testAlert = function () { alert('testing') }; }); 

HTML

 <body ng-controller="MainCtrl"> <div ng-bind-html="trustedHtml"></div> </body> 

$sce.trustAsHtmlng-bind-html并不意味着用指令构buildHTML。 这种技术是行不通的。

这是因为angular先是先编译然后再链接。 请参阅概念概述以获得一个良好的解释。

简而言之,当你链接在你的trustAsHtml定义的HTML时,angular度编译(因此理解) ng-click指令已经太迟了。

为了dynamic添加HTML,您应该查看$compile服务(和/或指令)。 文档在这里 。

对不起,我的英语不好。

对于Angular 1.6.1我find了一个适合我的解决scheme。

模板:

 <div ng-bind-html="trustAsHtml(content);" init-bind> </div> 

在控制器中:

  $scope.trustAsHtml = function(string) { return $sce.trustAsHtml(string); }; 

指示:

 .directive('initBind', function($compile) { return { restrict: 'A', link : function (scope, element, attr) { attr.$observe('ngBindHtml',function(){ if(attr.ngBindHtml){ $compile(element[0].children)(scope); } }) } }; })