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来呈现转换以用于临时目的。有没有办法避免这个不必要的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);
        }

    }
})

小提琴：http://jsfiddle.net/fyds082s/5/

有人可以提供帮助吗？

Answer 1

第二个指令的link函数在他之前的指令之前执行。当执行静态指令时检查ng-repeat状态时，它显示索引为0.它还没有完成编译ng-repeat。

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

<强>更新

我猜是错的。所以我的新猜测它与子范围有关。例如，当向第二个指令添加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>

Answer 2

您认为以下内容会产生什么顺序？

<my-directive>
  <my-child-directive caption="one" ng-if="true"></my-child-directive>
  <my-child-directive caption="two"></my-child-directive>
</my-directive>

如果您回答two, one，那么请回答您。

这种有点不直观的结果背后的原因是像ng-if和ng-repeat这样的“条件渲染”指令。它们都转换了托管元素，但稍后再渲染 - 当$scope.$watch或$scope.$watchCollection分别触发事件时 - 此时调用link myChildDirective函数。< / p>

最好的方法是不要依赖被调用的link函数的顺序来确定渲染的顺序。

ng-repeat始终在指令模板中呈现为最后一个

2 个答案: