Angular interfering with jQuery find

Question

Good Day,

I have some javascript code where I'm attempting to use jQuery find() method to apply some style to a div element that contains a class called gridfooter once the page renders.

Here's the pre-rendered HTML of the grid footer:

<div ng-if="messages != null && messages.length > 0" class="gridfooter">
    <table class="list-footer">
    ...
    </table>
</div>

Here's the rendered HTML:

<div ng-controller="gridController" id="message-grid" ng-show="visible" class="ng-scope">
  <div class="panel">
    <div class="gridheader" style="color: red; border: 1px solid red;">..</div>
    <div class="gridcontent" style="color: red; border: 1px solid red;">..</div>
    <div class="gridfooter">..</div>
  </div>
</div>

Here's the JavaScript that I'm using to find the gridfooter:

var thePanel = $('#message-grid .panel'),
    theFooter = thePanel.find(".gridfooter"),
    theContent = thePanel.find(".gridcontent"),
    theContentFooter = theContent.find(".gridfooter");

    $('#message-grid .panel').children().css({ "color" : "red", "border": "1px solid red" });

My problem is the div with the gridfooter class isn't styled like gridheader/gridcontent.

However, when I remove the angular ng-if directive from the pre-rendered HTML:

<div class="gridfooter">
    <table class="list-footer">
    ...
    </table>
</div>

Then the rendered div with gridfooter is styled

<div ng-controller="gridController" id="message-grid" ng-show="visible" class="ng-scope">
    <div class="panel">
        <div class="gridheader" style="color: red; border: 1px solid red;">..</div>
        <div class="gridcontent" style="color: red; border: 1px solid red;">..</div>
        <div class="gridfooter" style="color: red; border: 1px solid red;">..</div>
    </div>
</div>

I think the reason why this is not working is because: jQuery not working with ng-repeat. The answer to this question deals with event delegation.

Would I be correctly assuming that the ng-if handlers is bound at runtime, therefore .gridfooter doesn't exist?

If so, I'm not 100% sure how to fix this.

Any suggestions?

TIA,

coson

why dont you write css? $('#message-grid .panel').children().css({...}); is equal to #message-grid .panel > * { ... } in css — Alex
– Alex, Commented Apr 3, 2014 at 17:31
also, you are right that the jquery code executes once at runtime and must be re-called everytime the angular output changes the markup (i guess), but event delegation is event-based, so you'd have to run that code on angular callbacks (dont know if those exist) — Alex
– Alex, Commented Apr 3, 2014 at 17:34
@Alex - The children().css({ }) was just to see if I could apply a style. I planned on removing it once I solved my problem. — coson
– coson, Commented Apr 3, 2014 at 18:00

Fals · Accepted Answer · 2014-04-03 17:35:37Z

2

You should use ng-class to apply styles to your elements. It's not a good pratice to use JQuery side by side Angular JS code, besides in directives.

ngClass

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

You can evaluate any expression and then apply the class to your element.

answered Apr 3, 2014 at 17:35

Fals

6,8394 gold badges26 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Angular interfering with jQuery find

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related