调用Angular js中的$ sce.trustAsHtml（）string中的函数
我正在开发一个使用Angularjs的应用程序，并在我的页面中使用$sce.trustAsHtml()添加HTML 。 我想在上面dynamic添加的内容中调用一个函数。 我的HTML和脚本如下。
HTML
<div ng-app="ngBindHtmlExample"> <div ng-controller="ngBindHtmlCtrl"> <p ng-bind-html="myHTML"></p> </div> </div>
使用Javascript
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'); } }]);
的jsfiddle
点击这里查看
这有点棘手，因为ng-bind-html会简单地插入普通的旧html，而不会编译它（所以html中的任何指令都不会被angular处理。
诀窍是find一种方法来编译模板更改。 例如，你可以创build一个指令来做到这一点。 它看起来像这样：
.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>
看到这里的工作示例：
