选择AngularJS元素的嵌套子元素

时间:2014-09-24 16:39:19

标签: jquery angularjs angularjs-directive

我正在编写一个有选择地破坏嵌套元素范围的指令。但是我很难让.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"
  };
}

1 个答案:

答案 0 :(得分:1)

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

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

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