Question

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

<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 ??
中实现相同的功能

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

Answer 2

你可以使用angular ng-repeat指令追加新的div

假设您有一个包含一个元素的数组，每次单击该按钮时，您都会在数组中添加另一个元素，而在＃34; dataPane＆＃34;格

所以你的代码可以是：

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>

JS

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

这是小提琴link

以角度动态添加元素到DOM

3 个答案: