Question

我有一些使用ng-repeat创建的跨度：

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

我有一个事件指令，可以执行许多操作来相应地创建每个范围。其中一件事是检查是否有其他跨度数据类型=＆＃34; X＆＃34;。

在我的指示中，如果我执行以下操作，我将获得所有的课程＆＃39;事件＆＃39;：

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

但如果我尝试将其缩小到数据类型=＆＃34; X＆＃34;如下所示，我得到了不确定。

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

从[0]引用中删除parentid，因为您只有一个ID为year-1的元素，这意味着它不是数组。

如果元素由data属性存在

1 个答案: