在 Angular js 中调用 $sce.trustAsHtml() 字符串中的函数 [英] call function inside $sce.trustAsHtml() string in Angular js

问题描述

我正在使用 Angularjs 开发一个应用程序，并在我的页面中使用 $sce.trustAsHtml() 添加 HTML.我想在上面动态添加的内容中调用一个函数.我的 html 和脚本如下.

HTML

<div ng-controller="ngBindHtmlCtrl"><p ng-bind-html="myHTML"></p>

Javascript

angular.module('ngBindHtmlExample', ['ngSanitize']).controller('ngBindHtmlCtrl', ['$scope','$sce', 函数 ngBindHtmlCtrl($scope, $sce) {$scope.myHTML =$sce.trustAsHtml('我是一个带有 HTML 字符串ng-mouseover=removeExp()">链接！</a>和其他<em>东西</em>');$scope.removeExp = 函数 (){console.log('dfdfgdfgdfg');}}]);

jsfiddle

点击此处查看

解决方案

这有点棘手，因为 ng-bind-html 只会插入普通的旧 html 而不会编译它(所以任何指令在html 不会被 angular 处理.

诀窍是找到一种在模板更改时进行编译的方法.例如，您可以创建一个执行此操作的指令.它看起来像:

.directive('compileTemplate', function($compile, $parse){返回 {链接:功能(范围，元素，属性){var parsed = $parse(attr.ngBindHtml);function getStringValue() { return (parsed(scope) || '').toString();}//如果模板改变了重新编译scope.$watch(getStringValue, function() {$compile(element, null, -9999)(scope);//-9999 使它跳过指令，这样我们就不会重新编译自己});}}});

然后你可以像这样使用它:

<p ng-bind-html="myHTML" compile-template></p>

在此处查看工作示例:

http://jsfiddle.net/3J25M/2/

I am developing an app using Angularjs and adding HTML using $sce.trustAsHtml() in my page. I want to call a function in above dynamically added content. My html and script as below.

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

Click Here to see

解决方案

It's a bit tricky because ng-bind-html will simply insert plain old html and not bother compiling it (so any directives in the html will not be processed by angular.

The trick is finding a way to compile whenever the template changes. For example, you could create a directive that does this. It would look something like:

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

You can then use it like this:

<p ng-bind-html="myHTML" compile-template></p>

See the working example here:

http://jsfiddle.net/3J25M/2/

这篇关于在 Angular js 中调用 $sce.trustAsHtml() 字符串中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！