指令一個NG重複內不工作只看到

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會變得困惑，我可能會返回第一個對象。

如果你真的想使你的指令做出具體的選擇，那麼我建議加入了獨特的價值與weeksOut-組合，像tempRaceDetails動態生成selector值有一定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. 
);