以角度动态地将元素添加到 DOM答案

【问题标题】：Dynamically add element to DOM in angular以角度动态地将元素添加到 DOM
【发布时间】：2017-11-08 18:26:02
【问题描述】：

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

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

但是如何在 Angular 中实现相同的功能？？

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

你需要使用$compile

将 HTML 字符串或 DOM 编译成模板并生成模板函数，然后可以使用该函数将作用域和模板链接在一起。

和$sce

严格上下文转义 (SCE) 是 AngularJS 将绑定限制为仅呈现受信任值的一种模式。它的目标是帮助编写代码，使其 (a) 默认情况下是安全的，并且 (b) 使 XSS、点击劫持等安全漏洞的审计变得更加容易。

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

【讨论】：

谢谢！！但我想知道我是否可以在 $compile 函数中加载一个 html 模板，因为我的 html 很大
大约 100 行 html
@Kgn-web，那么我建议你创建一个指令，然后使用$compile

【解决方案2】：

您也可以通过这种方式附加一个新的 html 元素。我认为它很容易写也很容易理解。希望它会帮助你。 angular.element 用于访问 html 元素。这是html代码：

 angular.module('myApp',[]).controller('myCtrl', function($scope){
 
 		$scope.addElementChunk = function()
    {
       var htmlStr = '<div class="row dataPane"> Chunk of html elements </div>';
    	 debugger;
   		 angular.element(document.getElementById('dataPanes')).append(htmlStr);
    }
          
 });

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

 <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()" />
</div>
</div>

这是小提琴link

【讨论】：

【解决方案3】：

您可以使用角度 ng-repeat 指令追加新的 div

假设您有一个包含一个元素的数组，每次单击按钮时，您都会向数组中添加另一个元素，同时在“dataPane”div 中重复它

所以你的代码可以是：

HTML

<div ng-app="myApp" ng-controller="myCtr">
    <div class="col-md-12" id="dataPanes">
        <div class="row dataPane" ng-repeat="element in added_elements"> Chunk of html elements ( {{element}} ) </div>
    </div>

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

angular
.module('myApp', [])
.controller('myCtr', ['$scope', function($scope) {
    $scope.added_elements = ["elem 1"];
    $scope.addMoreElements = function(){
        $scope.added_elements.push("elem "+ ($scope.added_elements.length+1));
    } 
}])

这样您就可以添加任何您想要的关于重复行的数据，并以简单的方式将其绑定到 html 中，而无需重复整个 html 代码

Working Demo

【讨论】：