javascript - ng-repeat 总是在指令模板中最后呈现

Question

我有一个指令(<my-directive>)和子指令(<my-child-directive>)如下结构:

<my-directive>
        <my-child-directive caption="{{student}}" ng-repeat="student in students"></my-child-directive>
        <my-child-directive caption="static content1"></my-child-directive>  
</my-directive>

使用 ng-repeat 重复的第一个子指令和最后一个子指令是一个静态项。

现在我有两个问题:

问题 1:在最终输出中，最后一个指令呈现为第一个 <li> .有什么方法可以渲染 <li>s与子指令的顺序相同？

问题2:我在 <my-directive> 中使用了一个隐藏的 div为临时目的呈现 transclude 的模板。有什么办法可以避免这个不需要的 div 吗？

这是我的java脚本代码:

app=angular.module('myApp', [])
app.controller("MyController",function($scope){
    $scope.students=["Alex","George","Phillip"];
});


app.directive('myDirective',function(){
    return{
        restrict:'E',
        transclude:true,
        template:"<ul><li ng-repeat='item in items'>{{item.caption}}</li></ul> <div ng-transclude ng-hide='true'></div>",
        controller:function($scope){
            $scope.items=[];
            this.addItem=function(subScope){ 
                 $scope.items.push(subScope);   
            }
        },
        link:function(scope,element,attrs){ 
        }
    };
});

app.directive('myChildDirective',function () {
    return {
        restrict: 'E',
        require:"^myDirective",
        scope:{
            caption:"@"
        },

        link:function(scope,element,attrs,parentCtrl){
            parentCtrl.addItem(scope);
        }

    }
})

fiddle :http://jsfiddle.net/fyds082s/5/

有人可以帮忙吗？

Answer 1

第二个指令的链接函数在他之前的指令之前执行。当您在执行静态指令时检查 ng-repeat 状态时，它显示索引为 0。它尚未完成 ng-repeat 的编译。

我的猜测是 angular 将兄弟元素从最后一个链接到第一个，就像它首先从子元素链接一样

更新:

我的猜测是错误的。所以我的新猜测与子作用域有关。例如，当将 ng-if 添加到第二个指令时，它确实是第二个执行的:http://jsfiddle.net/fyds082s/7/

<my-directive>
        <my-child-directive caption="{{student}}" ng-repeat="student in students"></my-child-directive>
        <my-child-directive caption="static content1" ng-if="true"></my-child-directive>  
</my-directive>