javascript - 使用 jquery find 在 Angular Directive(指令)中获取 dom 元素

Question

如果我检查但无法使用 jquery.find() 获取它，元素 anchor 标记存在于 dom 中，它在控制台中返回长度 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？

提前致谢:)

Answer 1

认为您正在使用嵌入式 jQlite。 jQlite(angular 的“jQuery”端口)不支持按类查找。您可以在您的应用程序中包含 JQuery，或者您可以使用 QuerySelector 或 QuerySelectorAll 来获取您的子元素。

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