Выберите вложенный дочерний элемент элемента AngularJS

Question

Я пишу директиву, которая выборочно уничтожает область на вложенном элементе. Однако мне очень трудно получить .find(), чтобы вернуть что-нибудь мне. Я предполагаю, что это потому, что я не понимаю, что происходит, но здесь.

Моя директива:

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

элемент в вопросе имеет этот innerHTML (это Кендо Сетка):

"<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, чтобы я мог отменить или удалить класс?

Спасибо!

Update

Путь используется директива. Он используется в другой директиве, выводящей сетку кендо.

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 функция пожары.