Select nested child of AngularJS element

Question

I'm writing a directive that will selectively destroy the scope on a nested element. However I'm having an extremely difficult time getting .find() to return anything to me. I'm guessing it's because I don't properly understand what's going on, but here goes.

My directive:

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

The element in question has this innerHTML (it is a 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>"

I know... it's a long block, in any case it has nested td elements that I specifically want to grab. However my selected element.find("td") returns nothing at all.

I've tried traversing through the returned object of element using .childNodes and .children and have had no luck.

I need to be able to grab all the spans inside a td with a certain role.

I have jQuery as well, so I know I can use more advanced selectors than tags. The selector I was originally using was:

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

But when I couldn't get that to work, I changed it to a basic td selector, which also returns nothing.

Why does this not return anything? And how can I get it to return a list of td that I can then unbind or remove a class on?

Thanks!

Update

The way the directive is used. It is used in another directive outputting a kendo grid.

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

Blank? That doesn't make any sense. Why would it be blank when the rest of the attributes are present? — Blunderfest
– Blunderfest, Commented Sep 24, 2014 at 17:01
How are you populating the grid? Is it reading a remote datasource? Reason I ask is that the grid may not have any <td> tags in it yet by the time your link function fires. — sma
– sma, Commented Sep 24, 2014 at 17:04

sma · Accepted Answer · 2014-09-24 17:23:18Z

1

If you are reading the data for the grid from a remote datasource as in:

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

Then this is happening asynchronously and there may not be any <td> tags in the grid by the time your link function fires.

answered Sep 24, 2014 at 17:23

sma

9,5978 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blunderfest Over a year ago

Just for documentation's sake, I solved this by putting the functionality needed into the dataBound event of the grid.

Collectives™ on Stack Overflow

Select nested child of AngularJS element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related