Question

我编写了如下代码

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

    })

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

Answer 1

基本上问题是你的id="weeksOut"内ng-repeat重复了多次，而且在同一页上多次使用相同的ID selector并不是一个好习惯。当您对该选择器进行查询时jQuery / DOM会混淆，我可能会返回第一个对象。

如果你真的想制定指令以使选择器具体化，那么我建议通过添加selector组合的唯一值来动态生成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>

在您的指令中，您可以使用id属性

Donut.drawDonutSvc(tempRaceDetails.weeks, 
     tempRaceDetails.Perc, 
     90,
     '#FEFEFE', 
     '#5b5b5b',
     'WEEKS OUT', 
     'weeksOut-'+ tempRaceDetails.id //passed DOM selector name.
);

ng-repeat中的指令不仅仅是第一个看到的

1 个答案: