Создание углового js-динамического div

Question

Я создал динамический div на основе значений массива, используя jquery. Он отлично работает, Ниже приведен код 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); 
     } 
    }); 
}); 

Но мне нужно, чтобы сделать эту же функцию в угловом Js нг-инициализации вызова метода. Но угловой код didint создает любой 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)); 
} 

мне нужна помощь.

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

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