使用angularjs javascript嵌套附加html元素

我有一个名为

hero

的自定义指令，我想为多个

hero

创建一个嵌套视图

我想看到这样的景象：

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

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
变量元素=[
角元素（“”），
角元素（“”），
角元素（“”），
角元素（“”）
];
var含量；
对于（var i=0；i

但似乎：

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

---

编辑：对原始答案中的想法进行全面重构

您只需要将上一个节点“编入索引”，以便可以访问它并将新（当前）元素附加到它。我在下面展示了代码的相关部分

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

函数MyCtrl（$scope）{
//…为了简洁起见，您的代码被省略了
var含量；
var耳环=[]；
对于（var i=0；i

content=elements[i]content.append（…）i更新了演示，但不起作用请参见我编辑的答案。用一个应该可以。好的，让我看看演示。这似乎没那么复杂。我会给你反馈later@bookmarker，我刚刚编辑了我的答案。查看使用此代码获得的新结果。对不起，前面的回答错了。我测试了这个，得到了你说需要的结果。谢谢你的解决方案