Get dom element in angular directive using jquery find

Question

An anchor element is present in dom, if I check it, but cannot get it using jquery.find (), it returns a length of 0 in the console and because of that I cannot initialize angular xeditable on this 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>

Run codeHide result

How can I access an element with class .js-editable-item in the angular xeditable initialization directive on it?

Thanks in advance:)

Answer 1

, jQlite. jQlite (angular "jQuery" ) . JQuery QuerySelector QuerySelectorAll, .

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