NealR NealR - 4 months ago 80
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

.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');