CODEWITHSUNDEEP
javascriptangularjsdomangularjs-directive
NealR
NealR

Reputation: 10669

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 the form of a script tag (edit) 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>

Upvotes: 3

Views: 10624

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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

Upvotes: 5

austinthedeveloper
austinthedeveloper

Reputation: 2601

What about taking a more angular approach than psuedo jQuery? This is based on the ngStyle Angular doc:

<div ng-style="myStyle">Test</div>
<div ng-click="myStyle={'background-color':'red'}">Click Me</div>

You would then place the click event on whatever element you want (td). The ng-style can be moved to what you want affected (tr).

Upvotes: 0

Related Questions