Question

所以我很难理解控制台错误的来源。它目前没有破坏任何行为，但错误令人不安。当我在正在编辑的范围上触发.blur（）时，会发生错误。然后Jquery抱怨＆＃34; jquery.js：1451 Uncaught TypeError：elem.getAttribute不是函数＆＃34;

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

相关链接功能：

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

所以我不知道这个答案会有多普遍，但是如果它对你有用，那么问题就出现了，因为编译功能。

基本上，compileElement正在用新编译的实例替换最初绑定的span实例，所以当Jquery最终试图重新绑定click函数时，该元素不再存在，即使它中存在相同的span。地点。

解决方案是更新原始span的值，而不是使用$ compile来重新编译元素。

element.blur（）导致Uncaught TypeError：elem.getAttribute不是函数

1 个答案: