gpt4 book ai didi

javascript - 以 Angular 动态地将元素添加到DOM

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:24 24 4
gpt4 key购买 nike

这是我的页面在初始加载时的样子

<body>
<div class="col-md-12" id="dataPanes">
<div class="row dataPane"> Chunk of html elements </div>
</div>

<div class"col-md-12 text-right">
<input type="button" class="btn btn-primary" value="Add dynamic row" ng-click="addElementChunk()" />
</body>

我需要在单击按钮时向 div#dataPanes 添加行
如果我使用 jQuery,addElementChunk() 函数将如下所示

var addElementChunk = function()
{
var html = "<div class='row dataPane'> Chunk of html elements </div>";
$("#dataPanes").append(html);
}

but how do I implement the same in angular??

最佳答案

您需要使用 $compile

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

$sce

Strict Contextual Escaping (SCE) is a mode in which AngularJS constrains bindings to only render trusted values. Its goal is to assist in writing code in a way that (a) is secure by default, and (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier.

addElementChunk = function(){ 
var html = '<div class="row dataPane"> Chunk of html elements </div>';
var trustedHtml = $sce.trustAsHtml(html);
var compiledHtml = $compile(trustedHtml)($scope);
angular.element(document.getElementById('dataPanes')).append(compiledHtml);
}

关于javascript - 以 Angular 动态地将元素添加到DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44411991/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com