element.blur（）によりUncaught TypeErrorが発生しました：elem.getAttributeは関数ではありません

Question

私はコンソールエラーの原因を理解するのに苦労しています。現在のところ、動作は破られていませんが、エラーは不安です。編集中のスパンで.blur（）をトリガーすると、エラーが発生します。

ディレクティブの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> 

関連リンク機能：jqueryのは、 "：：1451キャッチされない例外TypeError elem.getAttributeは関数ではありませんjquery.jsを" 文句

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は最初にバインドされたスパンのインスタンスを新しくコンパイルされたインスタンスに置き換えていたため、Jqueryが最終的にクリック機能を再バインドしようとしたとき、同じスパンがそこにあったそれは場所です。

解決策は、$ compileを使用して要素を再コンパイルするのではなく、元のスパンの値を更新することでした。