0

I am using AngularJs ng-show, ng-hide for a control and also am using show(), hide() in javascript in different situations. But only the ng-show and ng-hide is working and not allowing jQuery show() and hide().

For the below div I have used ng-show and it's working fine:

<div class="generic_error_message" id="genericmsg" ng-show="(QuoteNew.$invalid && submitted) ||(QuoteNew.Birthdate.$pristine && submitted)">

For the same div I am using jQuery for a different condition after doing some service calls :

if (!formvalid || !dependentvalid || !InsExistvalid1 || !InsExistvalid2 || postcodeValid || ($('#getQuote').hasClass('ng-invalid')) || !validDependents)
 {
            e.preventDefault();
            $("#genericmsg").show();
}

here show() doesn't work...

Struggling to solve it. Please someone help me...

Improve this question
3
  • 6
    You shouldn't combine Angular directives and jQuery's DOM manipulation. Read Angular docs and take a look at this question: stackoverflow.com/questions/14994391/… , there you will find how to organize your code to make it work. Commented Nov 14, 2013 at 19:24
  • @rvignacio nothing wrong with using jQuery or other library DOM manipulation within angular directives when it is suitable. Consider a datepicker for example. Why try and re-invent the wheel when an external plugin has all the features and debugging done for you already. In OP case setting a scope variable is better advised, but can't generalize that shouldn't use external DOM manipulation within directives Commented Nov 14, 2013 at 19:32
  • @charlietfl, sorry, I didn't explain myself, what I wanted to say was: "do not mix Angular directive's DOM manipulation (done with any suitable library) with DOM manipulation done outside the directives". The OP states he's using jQuery after doing some service calls, so either he is changing the DOM outside Angular directives, or worse, he is making service calls in the directive (please use a controller). See @Erik Honn's answer Commented Nov 14, 2013 at 19:58

1 Answer 1

Reset to default
3

Boring answer, but here it is. Don't do that :)

Angular ng-show and ng-hide sets a specific class on the object that forces display: none. jQuery has no idea about Angular so it can't unset that class when it tries to show the element again. Trying to manipulate the same element with both jQuery and Angular will probably lead to lots of problems like this, so pick one and stick with it (at least for that element).

Edit: To be more specific. Angular sets/removes a class with display: none !important while jQuery adds/removes display: none directly on the element. Since Angular uses important it overrules jQuery in this case.

Also note that it fails the other way around as well. If jQuery hides an element Angular can't show it since Angular will just make sure the class it uses is not there, it can't know you used something else to hide the element.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.