Angular js动态div创建答案

【问题标题】：Angular js dynamic div creationAngular js动态div创建
【发布时间】：2016-09-27 18:57:38
【问题描述】：

我已经使用 jquery 基于数组值创建了动态 div。效果很好，下面是jquery的代码，

$(document).ready(function () {
    var i = 1;
    var arr = ["a", "b", "c"];
    /*arr=;*/
    //arr = doc.slice();

    $(window).load(function () {
        alert(arr[1] + ":" + arr.length);
        for (i = 0; i < arr.length; i++) {
            var ele = document.createElement("div");
            ele.setAttribute("id", "child" + i);
            ele.setAttribute("class", "span4 greenDark");
            ele.innerHTML = '<object type="text/html" data="iindex.html" ></object>';
            document.getElementById("mydiv").appendChild(ele);
        }
    });
});

但我需要在 Angular js ng-init 方法调用中执行相同的功能。但是角度代码没有创建任何 div。我试过下面的代码，

var arr = ["a", "b", "c"];
alert("load" + arr);

for (i = 0; i < arr.length; i++) {
    alert("load" + arr[i]);
    var ele = document.createElement("div");
    ele.setAttribute("id", "child" + i);
    ele.setAttribute("class", "span4 greenDark");
    ele.innerHTML = '<object type="text/html" data="iindex.html" ></object>';

    // angular.element(document.getElementById("mydiv").appendChild(ele));
    angular.element(document.getElementById('mydiv')).append($compile("<div><button class='btn btn-default' data-alert=" + scope.count + ">Show alert #" + scope.count + "</button></div>")(scope));
}

我需要帮助。

【问题讨论】：

为此编写指令
如何为这个函数编写指令？

标签： jquery html angularjs dynamic-content

【解决方案1】：

<div my-directive myarray="myarray"></div>



  angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
    $scope.myarray = ["a","b","c"];
  })
  .directive("myDirective", function($compile) {
    return {
      template: "<div></div>",
      restrict: 'EA',
      scope: {
        myarray: '='
      },
      link: function(scope, element, attrs) {  
         var template='<div ng-repeat="item in myarray"><button class="btn btn-default" >item#{{$index}}</button></div>';

            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
      }

    }
  });

检查小提琴https://jsfiddle.net/ebinmanuval/rpjacmy2/3/

【讨论】：

【解决方案2】：

Controller：

创建一个函数来返回这个 HTML：

function initButton () {

  var arr = ['a', 'b', 'c'];
  var html = '';

  for (var i = 0, length = arr.length; i < length; i++) {
    html += "<div><button class='btn btn-default' data-alert=" + i + ">Show alert #" +i"</button></div>";
  }

  return html; 

}


$scope.buttonHTML = initButton();

View:

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

【讨论】：

记得包含 angular-sanitize。