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...

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • 6
    You shouldn't combine Angular directives and jQuery's DOM manipulation. Read Angular docs and take a look at this question: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 , there you will find how to organize your code to make it work. – rvignacio Nov 14 '13 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 – charlietfl Nov 14 '13 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 – rvignacio Nov 14 '13 at 19:58

1 Answers1

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.

Erik Honn
  • 7,576
  • 5
  • 33
  • 42