在 Angular js 中调用 $sce.trustAsHtml() 字符串中的函数

IT技术 javascript angularjs
2021-02-19 02:17:15

我正在使用 Angularjs 开发一个应用程序并在我的页面中添加HTMLusing $sce.trustAsHtml()。我想在上面动态添加的内容中调用一个函数。我的 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');
    }
}]);

提琴手

点击这里查看

1个回答

这有点棘手，因为它ng-bind-html只会插入普通的旧 html 而不会编译它（因此 html 中的任何指令都不会被 angular.js 处理）。

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

.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/

了不起的家伙。这对我有帮助
2021-04-20 02:17:15
这正是我所需要的！谢谢！
2021-04-21 02:17:15
太棒了，正是我需要的
2021-04-25 02:17:15
经过调整后，这对我有用。我在一个离子应用程序中使用它，它不喜欢函数 getStringValue()，只在模拟器中使用。我需要 var getStringValue = function()。
2021-04-28 02:17:15
任何人都可以看到这个链接stackoverflow.com/questions/45713677/...
2021-05-12 02:17:15
其它你可能感兴趣的问题
上一篇如何在 Rails 视图中将 Ruby 变量传递给 JavaScript 函数？ 下一篇如何重新发送失败的 ajax 请求？