Get dom Element in eckige Direktive mit jquery find

Question

Das Element Anker Tag ist in der Dom vorhanden, wenn ich inspiziere, kann aber nicht erhalten jquery.find(), gibt es Länge 0 in der Konsole &, wegen der ich nicht initialisieren kann winkelfähig auf diesem Element.

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>

Wie kann ich auf das Element mit der Klasse Js editierbare-Element in der Richtlinie über die es Winkel xeditable zu initialisieren?

Vielen Dank im Voraus :)

Answer 1

Denken Sie, dass Sie den eingebetteten jQlite verwenden. jQlite (angulars "jQuery" -Port) unterstützt keine Suche nach Klassen. Sie können JQuery in Ihre App integrieren oder Sie können QuerySelector oder QuerySelectorAll verwenden, um Ihr Kindelement zu erhalten.

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