element.blur（）导致未捕获的TypeError：elem.getAttribute不是函数

Question

So I am struggling to understand where a console error is coming from. It doesn't currently break any behavior, but the error is unsettling. The error happens when I trigger a .blur() on a span that is being edited. Jquery then complains "jquery.js:1451 Uncaught TypeError: elem.getAttribute is not a function"

The directive html:

<span ng-if="!time">{{ value }}</span>
<button class="btn btn-primary delink" 
        ng-if="delinkable && delinkVisable" 
        ng-click="resource.delink()">Not speaking</button>
<span ng-if="time">{{ value | momentFormat }}</span>
<div ng-if="time && datepicker" class="dropdown" id="datepicker">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <datetimepicker ng-model="resource.MeetingDateTime" 
                    data-on-set-time="updateResource()"
                    data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }">
    </datetimepicker>
</ul>
<a class="dropdown-toggle" id="dropdown2" role="button" data-disabled="true"
   data-toggle="dropdown" data-target="#" href>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
</a>

The relevant link functions:

function handleChanges () {
    var editSpan = angular.element(element.children()[0]);
    var newValue;

    if (scope.time) {
        newValue = dates.makeDateTime(editSpan.text());
        if (newValue) {
            scope.resource[scope.property] = newValue;
            newValue = editSpan.text();
        } else {
            editSpan.text(oldValue);
            newValue = editSpan.text();
            scope.resource[scope.property] = dates.makeDateTime(editSpan.text());
            scope.datepicker = true;
            $('#dropdown2').trigger('click');
            scope.$digest();
        }
    } else {
        scope.resource[scope.property] = editSpan.text();
        newValue = editSpan.text();
    }

    if (newValue !== oldValue) {
        scope.updateResource();
        compileElement();
    } else {
        if (scope.time) {
           hideDatepicker();
        }
    }
}

function bindEvents () {
    var editSpan = angular.element(element.children()[0]);

    editSpan.on('blur', function () {
        editSpan.attr('contentEditable', false);
        editSpan.unbind('keydown');
        editSpan.unbind('blur');
        scope.editing = false;
        handleChanges();
    });
    editSpan.on('keydown', function(event){
        if (event.keyCode == 27) {
            event.preventDefault();
            editSpan.text(oldValue);
            editSpan.blur(); //The error seems to happen after this call
        } else if (event.keyCode == 13) {
            editSpan.blur(); //and after this call
        } else if (scope.deleteable && event.keyCode == 8) {
            if (editSpan.text().length == 0 || event.ctrlKey) {
                scope.delete();
            }
        }
    });
}

Answer 1

So I don't know how generalizable this answer will be, but in case it is useful to you, the problem occurred because of the compile function.

Basically, compileElement was replacing the originally bound instance of the span with the freshly compiled instance, so when Jquery eventually got around to trying to rebind the click function, the element no longer existed, even though an identical span was there in it's place.

The solution was to update the values of the original span, instead of using $compile to re-compile the element.