我正在编写一个有选择地破坏嵌套元素范围的指令。但是我很难让.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"
};
}
答案 0 :(得分:1)
如果要从远程数据源读取网格数据,请执行以下操作:
new kendo.data.DataSource({
transport: {
read: {
url: "path/to/service",
dataType: "json"
}
}
});
然后这是异步发生的,当<td>
函数触发时,网格中可能没有link
个标记。