要素がデータである場合は

Question

属性IはNGリピートを使用して作成されているスパンの数を持っている：

<div class="row" id="year-1"> 
    <span class="event" ng-repeat="(key, event) in events" event data-start={{event.date_start}} data-end={{event.date_end}} data-key={{key}} data-type={{event.role}}> 
     {{event.title}} - {{event.date_start}} 
    </span> 
</div> 

私はそれに応じて作成された各スパンを操作するために多くのことを行うイベントのディレクティブを持っています。 1つは、data-type = "X"のスパンがあるかどうかをチェックすることです。私は次の操作を行う場合、私の指示で

は、私はクラスの「イベント」を持つすべてのスパンの取得：

var parentid = angular.element(document.getElementById('year-1')); 
var typeExists = parentid[0].querySelectorAll('.event')[0]; 

をしかし、私は、次のようなデータ・タイプ=「X」にそれを絞り込むしようとした場合次は、私は定義されていません。

var typeExists = parentid[0].querySelectorAll('.event[data-type="' + attr.type + '"]')[0]; 

私は何か見落としていますか？全ディレクティブ：

angular.module("app").directive("event", function() { 
    return { 
     link: function(scope, element, attr) { 
      var getStart = attr.start.split('-'), 
       getEnd  = attr.end.split('-'), 
       getKey  = attr.key; 
       getHeight = element[0].offsetHeight; 

      var parentid = angular.element(document.getElementById('year-1')), 
       backgroundParent = angular.element(document.getElementsByClassName('year-current')); 

      // get the month event starts with 
      var monthStart = angular.element(document.querySelectorAll('[data-location="' + getStart[1] + '"]')); 

      // get the month event ends with 
      var monthEnd = angular.element(document.querySelectorAll('[data-location="' + getEnd[1] + '"]')); 

      // how many events do we have 
      var eventcount = angular.element(document.getElementsByClassName('event')); 

      // get width of events container 
      var eventsContainer = angular.element(document.getElementById('events')); 

      // does this type exist already, if so get its top 
      var typeExists = parentid[0].querySelectorAll('.event')[0]; 
      console.log(typeExists); 

      if(monthStart.length > 0) { 

       // how many days in start month 
       var daysStart = getDaysInMonth(getStart[1], getStart[0]), 
        daysStartPercent = (getStart[2]/daysStart.length); 

       // how many days in end month 
       var daysEnd = getDaysInMonth(getEnd[1], getEnd[0]), 
        daysEndPercent = (getEnd[2]/daysEnd.length); 

       // determine left starting % 
       var elementLeft = ((monthStart[0].offsetLeft + (monthStart[0].clientWidth * daysStartPercent))/eventsContainer[0].clientWidth) * 100; 

       // determine width in % 
       var elementRight = ((monthEnd[0].offsetLeft + (monthEnd[0].clientWidth * daysEndPercent))/eventsContainer[0].clientWidth) * 100; 
       var width = (elementRight - elementLeft); 

       // get the background color for this role 
       var background = angular.element(document.querySelector('.role[data-type="' + attr.type + '"]'))[0].getAttribute('data-background'); 

       element.css({ 
        'left': elementLeft + '%', 
        'top' : parentid[0].offsetHeight + 'px', 
        'width': width + '%', 
        'background': background 
       }); 

       element.addClass('stretchRight'); 

       parentid.css({'height': parentid[0].offsetHeight + getHeight + 'px'}); 
       backgroundParent.css({'height': parentid[0].offsetHeight + getHeight + 'px'}); 



      } else { 
       element.css({ 'display': 'none' }); 
      } 


     } 
    } 
}); 

Answer 1

私はあなたが見た問題を再作成することができました、あなたはここからあなたの行を変更する必要があることがわかった。これに

var typeExists = parentid[0].querySelectorAll('.event[data-type="' + attr.type + '"]')[0]; 

：

var typeExists = parentid.querySelectorAll('.event[data-type="' + attr.type + '"]')[0]; 

削除ID：year-1という1つの要素のみが配列ではないため、parentidの参照の[0]を参照してください。