使用jQuery的find方法在Angular指令中获取DOM元素

Question

如果我检查DOM，可以看到锚点元素标签存在，但是使用jquery.find()无法获取它，控制台返回长度为0，因此我无法在该元素上初始化Angular 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>

我该如何访问指令中类为.js-editable-item的元素，以便在其中初始化Angular xeditable？谢谢！ :)

- Rohini

Answer 1

您正在使用内置的 jQlite。jQlite（Angular 的“jQuery”端口）不支持按类查找。您可以在应用程序中包含 JQuery，也可以使用 QuerySelector 或 QuerySelectorAll 来获取子元素。

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

- trollr