Wenn das Element vorhanden ist, indem Datenattribut

Question

Ich habe eine Anzahl Felder mit ng-repeat erstellt werden:

<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> 

Ich habe eine Richtlinie für Ereignis, das eine Reihe von Dingen tut jede Spanne entsprechend erstellt zu manipulieren. Eine der Sachen ist zu überprüfen, gibt es andere Spannen mit Datentyp = "X".

In meiner Richtlinie, wenn ich die folgenden Code, erhalte ich die mit Klasse all Spannen ‚Ereignis‘:

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

Aber wenn ich versuche, es zu verengen, um Daten-type = „X“ wie Folgendes werde ich undefiniert.

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

Bin ich etwas übersehen? Voll Richtlinie:

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

konnte ich das Problem, das Sie sahen neu erstellen und festgestellt, dass Sie Ihre Linie von diesem ändern müssen:

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

dazu:

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

Entfernen Sie die [0] von Ihrer parentid Referenz, weil Sie nur ein einzelnes Element mit der ID year-1 haben, was bedeutet, dass es kein Array ist.