Angularjs ng重复中的指令不起作用，仅第一次看到

我已经编写了如下代码

 <div  ng-repeat="race in Races" ng-if="$index == selectedRace">
<div id="weeksOut" racedetails="race" raceday-donut></div>
</div>

   .directive('racedayDonut', function(Donut){
    return {
        restrict: 'EA',
        transclude: true,
        scope : {
                    racedetails         : '='
                },
        replace : true,
        template : "<div></div>",
        link: function(scope)
        {
             scope.$watch('racedetails',function(newData)
            {
                var tempRaceDetails         =  newData;

                if(tempRaceDetails)
                {
                    Donut.drawDonutSvc(tempRaceDetails.weeks, tempRaceDetails.Perc, 90,'#FEFEFE', '#5b5b5b',' WEEKS OUT', 'weeksOut');
                }               
            });
        }
      };

    })

我的指令如下所示

 <div  ng-repeat="race in Races" ng-if="$index == selectedRace">
<div id="weeksOut" racedetails="race" raceday-donut></div>
</div>

   .directive('racedayDonut', function(Donut){
    return {
        restrict: 'EA',
        transclude: true,
        scope : {
                    racedetails         : '='
                },
        replace : true,
        template : "<div></div>",
        link: function(scope)
        {
             scope.$watch('racedetails',function(newData)
            {
                var tempRaceDetails         =  newData;

                if(tempRaceDetails)
                {
                    Donut.drawDonutSvc(tempRaceDetails.weeks, tempRaceDetails.Perc, 90,'#FEFEFE', '#5b5b5b',' WEEKS OUT', 'weeksOut');
                }               
            });
        }
      };

    })

指令（'racedayDonut'，函数（Donut）{
返回{
限制：“EA”，
是的，
范围：{
详细信息：'='
},
替换：正确，
模板：“”，
链接：功能（范围）
{
范围$watch（'racedetails'，函数（newData）
{
var tempRaceDetails=新数据；
如果（详细信息）
{
甜甜圈.drawDonutSvc（tempRaceDetails.weeks，tempRaceDetails.Perc，90，'fefefefe'，'5bB'，'weeks OUT'，'weeksOut'）；
}               
});
}
};
})

---

只绘制第一个指令，但不显示第二个指令和其他指令。当选定的索引更改和数据更改时，它会进入内部，但不会绘制。

基本上，问题是您的

id=“weeksOut”

内部

ng repeat

，这是重复的次数，在同一页面上多次使用相同的id

选择器不是一个好的做法。当您对选择器进行查询时，
jQuery
/
DOM
将变得混乱，我可能会返回第一个对象

如果你真的想让你的指令使选择器具体化，那么我建议你动态地生成你的
选择器
值，方法是在
weeksOut-
的组合中添加唯一值，比如
tempRaceDetails
有一些
id
，它告诉你记录的唯一性。所以它看起来就像是
weeksOut-{{tempRaceDetails.id}

标记

<div  ng-repeat="race in Races" ng-if="$index == selectedRace">
   <div id="weeksOut-{{racedetails.id}}" racedetails="race" raceday-donut></div>
</div>

我以前试过这个，但不起作用。现在它成功了：）@Hacker很高兴帮助你..谢谢：）