jquery findを使用してangularディレクティブのdom要素を取得します。

Question

要素アンカータグは、jquery.find（）を使用して調べても取得できない場合は、コンソール&で長さ0を返します。その要素上でxeditableな角度。

angular.module('built.objects') 
 
.controller('listCtrl', listCtrl) 
 
.directive('objectConfigListItem', function(Relay, Modal) { 
 
    return { 
 
     template: oCTmpl, 
 
     restrict: 'A', 
 
     replace:true, 
 
     scope: { 
 
     column: "=", 
 
     gridItem: "=" 
 
     }, 
 
     link: function(scope, elem, attrs) {  
 
     var eItem = $(elem).find('.js-editable-item'); 
 
     <!-- console.log(eItem.length) --> 
 
     $timeout(function() { 
 
      initEditables(); 
 
     },0) 
 
    
 
     function initEditables() { 
 
      for (var i = 0; i < eItem.length; i++) { 
 
      initialize(eItem.eq(i)) 
 
      }; 
 
     } 
 
     
 
     function initialize(dom) { 
 
      var self = this; 
 
      var type = dom.attr("data-type"); 
 
      var name = dom.attr("data-name"); 
 
      var source = dom.attr("data-select-source"); 
 
      var options = { 
 
      validate: function(value) { 
 
       updateObjectConfig(value,scope.column.key); 
 
       return false; 
 
      }, 
 
      }; 
 
      console.log("in initialize",type,name,source) 
 
      dom.editable(options); 
 
     } 
 
    } 
 
    });

<!-- oCTmpl template --> 
 
<td> 
 
<div class="editable-object-directive"> 
 
    <div ng-if="column.data_type==='text' || column.data_type==='number'"> 
 
    <a class="editable-item js-editable-item" href="#" data-type="{{column.data_type}}" data-value="{{colValue}}" data-name="{{colValue}}" data-title="{{column.label}}"></a> 
 
    </div> 
 
    <div ng-if="column.data_type==='boolean'"> 
 
    <a class="editable-item js-editable-item" href="#" data-type="select" data-select-source="boolean" data-source="{{booleanArray}}" data-name="{{colValue}}" data-title="{{column.label}}"></a> 
 
    </div> 
 
</div> 
 
</td>

は、どのように私はそれに角度xeditableを初期化するためにディレクティブでクラスの.js-編集可能な項目を持つ要素にアクセスすることができますか？

ありがとうございます。

Answer 1

埋め込みjQliteを使用していると思われます。 jQlite（angleの "jQuery"ポート）は、クラスによるルックアップをサポートしていません。あなたのアプリにJQueryを組み込むか、QuerySelectorまたはQuerySelectorAllを使って子要素を取得することができます。

link: function(scope, element, attrs) { 
    console.log(element[0].querySelector('.js-editable-item')) 
}