CODEWITHSUNDEEP
jqueryangularjs
coson
coson

Reputation: 8659

Angular interfering with jQuery find

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

Upvotes: 0

Views: 113

Answers (1)

Fals
Fals

Reputation: 6839

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.

Upvotes: 2

Related Questions