NealR NealR - 1 year ago 294
AngularJS Question

Get parent element in Angular directive

I'm attempting to find the parent

tr
element when I use clicks a button on a
datepicker
calendar. Since I don't want to use jQuery in my Angular app, and this isn't possible using strictly CSS, I created the directive below. The
elm.find
is able to find and alter the css of the button correctly, so I know that I've found the element I'm looking for, however now I need to travel up the DOM.

I'm used to jQuery syntax, which doesn't work, and I haven't been able to find anything effective on the interwebs. Any chance someone could help me out with the syntax?

/* Linker for the directive */
var linker = function (scope, elm, attrs) {
elm.on('click', function() {
elm.find('table tbody tr button.active').parent('td').css('background-color', 'red');
});
};


EDIT

This is a directive that needs to be placed on a
uib-datepicker
element (Angular UI Bootstrap) in order to change alter the background-color for an entire row. The framework doesn't come with this functionality and the HTML isn't generated until the page loads.

I need to attach the directive to the element below, find the selected item and then work back up the DOM to find the parent
tr
.

<uib-datepicker highlightselectedrow class="well well-sm" ></uib-datepicker>

Answer Source

.parent will look exact the upper element only. I'd say that rather use .closest so it will search in parent till it gets td

elm.find('table tbody tr button.active')
.closest('td').css('background-color', 'red');