通过 ng-bind-html 使用插入的 HTML 中的函数

Question

我从数据库中获取了一个 HTML 字符串，我想通过

 ng-bind-html

将其插入到我的 AngularJs 应用程序中。我是这样做的：

HTML：

<div ng-bind-html="myBindHtml"></div>

JavaScript：

$scope.myBindHtml = $sce.trustAsHtml(htmlStringToInsert);

我的 HTML（我想插入）看起来像这样：

<button ng-click="testClickEvent()">TestButton</button>

插件工作正常。

现在我编写了一个按钮应该调用的函数（testClickEvent）。这只是将一个字符串输出到控制台。

但这部分不起作用。我猜想我插入的 HTML 与该函数没有绑定。有什么办法可以调用我的函数吗？

Answer 1

Angular 代码仅当您在 Angular 上下文中运行时才会执行。当您使用

ng-bind-html

时，它会在 Angular 上下文之外生成，因此像

ng-click

这样的 Angular 事件不起作用，您需要依赖像

onclick

这样的纯 JS 事件，因此请避免使用这些场景，而直接在 Angular 上进行编码，因为解决方案的复杂性！

当需要角度事件并且我们需要直接在前端编码而不是从数据库或其他方法输入时，我们可以避免

ng-bind-html

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($sce, $scope) {
    $scope.items = [];
    for (var i = 1; i <= 2; i++) {
        $scope.items.push({
            description: $sce.trustAsHtml('<h2 onclick="console.log(\'hello\')">with onclick item ' + i + '</h2>')
        });
    };
    $scope.items2 = [];
    for (var i = 1; i <= 2; i++) {
        $scope.items.push({
            description: $sce.trustAsHtml('<h2 ng-click="console.log(\'hello\')"> with ng-click item ' + i + '</h2>')
        });
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js" integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div ng-app="myApp">
<div ng-controller="myCtrl">
  <div>
    <div ng-repeat="item in items" ng-bind-html="item.description"></div>
  </div>
  <hr />
  <div>
    <div ng-repeat="item in items2" ng-bind-html="item.description"></div>
  </div>
</div>
</div>