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

4

1 回答 1

3

无聊的答案，但就是这样。不要那样做:)

Angular ng-show 和 ng-hide 在强制显示的对象上设置了一个特定的类： none。jQuery 不知道 Angular，因此当它尝试再次显示该元素时，它无法取消设置该类。尝试同时使用 jQuery 和 Angular 操作同一个元素可能会导致很多这样的问题，所以选择一个并坚持使用它（至少对于那个元素）。

编辑：更具体地说。Angular 使用display: none !important设置/删除类，而 jQuery直接在元素上添加/删除display: none 。由于 Angular 使用了 important，它在这种情况下优先于 jQuery。

另请注意，它也以相反的方式失败。如果 jQuery 隐藏了一个元素，Angular 无法显示它，因为 Angular 只会确保它使用的类不存在，它无法知道您使用了其他东西来隐藏该元素。

于 2013-11-14T19:49:47.390 回答