Question

我正在编写一个有选择地破坏嵌套元素范围的指令。但是我很难让.find()向我回复任何东西。我猜这是因为我没有正确理解发生了什么，但是这里有。

我的指示：

function sampleDir() {
  return {
    scope: {},
    link: function (scope, element) {
        console.log(element.find("td"));
        // Do Stuff with the element
    }
  }
}

有问题的元素有这个innerHTML（它是一个Kendo Grid）：

"<div class="k-grouping-header" data-role="droptarget">Drag a column header and drop it here to group by that column</div><div class="k-grid-header" style="padding-right: 21px;"><div class="k-grid-header-wrap"><table role="grid"><colgroup><col><col></colgroup><thead role="rowgroup"><tr role="row"><th role="columnheader" data-field="name" data-title="Name" class="k-header ng-scope" data-role="columnsorter"><a class="k-link" href="#">Name</a></th><th role="columnheader" data-field="desc" data-title="Description" class="k-header ng-scope" data-role="columnsorter"><a class="k-link" href="#">Description</a></th></tr></thead></table></div></div><div class="k-grid-content"><table role="grid"><colgroup><col><col></colgroup><tbody role="rowgroup"><tr data-uid="d4175ada-5ff4-48de-8813-4cf5b49f53a4" role="row" class="ng-scope"><td role="gridcell"><span ng-bind="dataItem.name" class="ng-binding">Mock data 1</span></td><td role="gridcell"><span ng-bind="dataItem.desc" class="ng-binding">This is sample mock data.</span></td></tr><tr class="k-alt ng-scope" data-uid="ac273954-6d95-4edf-bcf9-b3ed580ae1f1" role="row"><td role="gridcell"><span ng-bind="dataItem.name" class="ng-binding">Second mock data field</span></td><td role="gridcell"><span ng-bind="dataItem.desc" class="ng-binding">Second sample of mock data</span></td></tr><tr data-uid="2a207cb2-a96b-4d66-8986-c0442a571215" role="row" class="ng-scope"><td role="gridcell"><span ng-bind="dataItem.name" class="ng-binding">Last one on the first page here.</span></td><td role="gridcell"><span ng-bind="dataItem.desc" class="ng-binding">This is a description to go here.</span></td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager k-widget" data-role="pager"><a href="#" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" data-page="1" tabindex="-1"><span class="k-icon k-i-seek-w">Go to the first page</span></a><a href="#" title="Go to the previous page" class="k-link k-pager-nav  k-state-disabled" data-page="1" tabindex="-1"><span class="k-icon k-i-arrow-w">Go to the previous page</span></a><span class="k-pager-input k-label">Page<input class="k-textbox">of 3</span><a href="#" title="Go to the next page" class="k-link k-pager-nav" data-page="2" tabindex="-1"><span class="k-icon k-i-arrow-e">Go to the next page</span></a><a href="#" title="Go to the last page" class="k-link k-pager-nav k-pager-last" data-page="3" tabindex="-1"><span class="k-icon k-i-seek-e">Go to the last page</span></a><a href="#" class="k-pager-refresh k-link" title="Refresh"><span class="k-icon k-i-refresh">Refresh</span></a><span class="k-pager-info k-label">1 - 3 of 8 items</span></div>"

我知道......这是一个很长的块，无论如何它都有嵌套的td元素，我特意想抓住它们。但是，我选择的element.find("td")根本不会返回任何内容。

我尝试使用element和.childNodes遍历.children的返回对象并且没有运气。

我需要能够使用某个spans抓取td内的所有role。

我也有jQuery，所以我知道我可以使用比标签更高级的选择器。我最初使用的选择器是：

element.find("td[data-role='gridcell']")

但是当我无法使用它时，我将其更改为基本的td选择器，它也不返回任何内容。

为什么这不会返回任何东西？我怎样才能让它返回td的列表，然后我可以解除绑定或删除课程？

谢谢！

更新

使用该指令的方式。它用于输出kendo网格的另一个指令。

function hiKendoGrid() {
  return {
    scope: {
        hiPageSize: "="
    },
    template: "<div sample-dir kendo-grid k-options='gridOptions' k-ng-delay='gridOptions'></div>",
    controller: "hiKendoGridCtrl"
  };
}

Answer 1

如果要从远程数据源读取网格数据，请执行以下操作：

new kendo.data.DataSource({
            transport: {
                read: {
                    url: "path/to/service",
                    dataType: "json"
                }
            }
});

然后这是异步发生的，当<td>函数触发时，网格中可能没有link个标记。

选择AngularJS元素的嵌套子元素

1 个答案: