CODEWITHSUNDEEP
jqueryangularjsangularjs-directive
user2541753
user2541753

Reputation:

Angularjs being prominent over jQuery and jQuery code not working

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

Upvotes: 0

Views: 132

Answers (1)

Erik Honn
Erik Honn

Reputation: 7576

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.

Upvotes: 3

Related Questions