我正在使用Angularjs开发应用程序,并在页面中添加HTML使用$sce.trustAsHtml()。我想在上面动态添加的内容中调用一个函数。我的html和脚本如下。
HTML
$sce.trustAsHtml()
<div ng-app="ngBindHtmlExample"> <div ng-controller="ngBindHtmlCtrl"> <p ng-bind-html="myHTML"></p> </div> </div>
angular.module('ngBindHtmlExample', ['ngSanitize']) .controller('ngBindHtmlCtrl', ['$scope','$sce', function ngBindHtmlCtrl($scope, $sce) { $scope.myHTML =$sce.trustAsHtml( 'I am an <code>HTML</code>string with <a href="#" ng-mouseover="removeExp()">links!</a> and other <em>stuff</em>'); $scope.removeExp = function (){ console.log('dfdfgdfgdfg'); } }]);
点击这里查看
这有点棘手,因为ng-bind-html将只插入普通的旧html而不用麻烦对其进行编译(因此html中的任何指令都不会被angular处理。
ng-bind-html
诀窍是在模板更改时找到一种编译方法。例如,您可以创建一个执行此操作的指令。它看起来像:
.directive('compileTemplate', function($compile, $parse){ return { link: function(scope, element, attr){ var parsed = $parse(attr.ngBindHtml); function getStringValue() { return (parsed(scope) || '').toString(); } //Recompile if the template changes scope.$watch(getStringValue, function() { $compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves }); } } });
然后可以像这样使用它:
<p ng-bind-html="myHTML" compile-template></p>
在这里查看工作示例:
http://jsfiddle.net/3J25M/2/