angularjs – 在$sce.trustAsHtml内呈现指令

发布时间：2020-12-17 08:16:58 所属栏目：安全来源：网络整理

导读：我在这里包括一个Plunker： http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview 我试图添加一个按钮到DOM，当点击应该执行绑定到它的功能。在这种情况下，应该提醒“测试”。这是代码。调节器 app.controller('MainCtrl',function($scope,$sce) { $scope

我在这里包括一个Plunker： http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

我试图添加一个按钮到DOM，当点击应该执行绑定到它的功能。在这种情况下，应该提醒“测试”。这是代码。

调节器

app.controller('MainCtrl',function($scope,$sce) {
        $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');  

        $scope.testAlert = function () {
            alert('testing')
        };
});

HTML

<body ng-controller="MainCtrl">
    <div ng-bind-html="trustedHtml"></div>
</body>

$ sce.trustAsHtml和ng-bind-html不是要用指令构建HTML。这种技术将无法正常工作。

这是因为角度通过首先编译然后链接起作用。看到conceptual overview的一个很好的解释。

简而言之，当您链接在trustAsHtml中定义的HTML时，编辑ng(并因此了解)ng-click指令为时已晚。

为了动态添加HTML，您应该查看$ compile服务(和/或指令)。 Docs are here。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!