添加html元素作爲嵌套與angularjs javascript

Question

我有一個自定義指令名爲hero而我想爲多個heros創建一個嵌套視圖。 Demo

我希望得到這樣一個觀點：

<hero a="1"> 
    <hero a="2"> 
     <hero a="3"> 
      <hero a="4"></hero> 
     </hero> 
    </hero> 
</hero> 

和控制器是這樣的：

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    var elements = [ 
     angular.element('<hero a="1"></hero>'), 
     angular.element('<hero a="2"></hero>'), 
     angular.element('<hero a="3"></hero>'), 
     angular.element('<hero a="4"></hero>') 
    ]; 

    var content; 

    for(var i = 0; i < elements.length; i++){ 

     if(!content){ 
       content = elements[i]; 
     }else{ 
       content.append(elements[i]);    
     } 
    } 

    console.log(content[0]);   
} 

但它似乎：

<hero a="1"> 
    <hero a="2"></hero> 
    <hero a="3"></hero> 
    <hero a="4"></hero> 
</hero> 

Answer 1

編輯：全重構原始答案中暴露的想法。

你只需要保持「索引」你的最後一個節點，所以你可以訪問它並追加新的（當前）元素。我展示了下面的代碼的相關部分。

function MyCtrl($scope) { 
    //... your code omitted for brevity 

    var content; 
    var eArr = []; 

    for(var i = 0; i < elements.length; i++){ 

     if(!content){ 
       content = elements[i]; 
     }else{ 
       elements[i - 1].append(elements[i]); 
     } 
     eArr.push(elements[i]); 
    } 

    console.log(content[0]); 
}