Get dom element in angular directive using jquery find

The element anchor tag is present in the dom if I inspect but cannot get it using jquery.find() , it returns length 0 in console & because of which I cannot initialize angular xeditable on that 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>

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

Thanks in advance :)

Answers 1

  • Think you're using the embedded jQlite. jQlite (angular's "jQuery" port) doesn't support lookup by classes. You can include JQuery in your app or you can use the QuerySelector or QuerySelectorAll to get you child element.

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

Related Articles