Jquery plugin not working "correctly"

[Aimery Marsily]

Hi,

I'm using AngularJS on an edit page of my website. On this page I load Chosen and Tooltipster (that I use all around the website) but I can't understand why they are not working. No errors, but the tooltips doesn't show and the Chosen select is empty. I think it's because AngularJS display the content after the JQuery loop on the DOM or something like that but I can't understand how I should fix this ?

I don't want to use special version of this plugin for AngularJS as I have also my own JQuery plugin that I need to make work on the same page. So my wish is to understand the AngularJS way to leave JQuery plugin do their jobs ?

Thanks a lot !

[Aimery Marsily]

I have create a JSFiddle to show the problem : http://jsfiddle.net/rvBKJ/14/

As you can see JQuery append Chosen to all the select elements but it doesn't work when using Angular and ng-If...

[Gustavo Cruz]

Why not use ui-select? It´s so much easier....

On Tue, Mar 17, 2015 at 6:12 PM, Aimery Marsily <marsil...@gmail.com> wrote:

I have create a JSFiddle to show the problem : http://jsfiddle.net/rvBKJ/14/

As you can see JQuery append Chosen to all the select elements but it doesn't work when using Angular and ng-If...

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[jongwoo Yoo]

Dom is not created when ng-if == false

http://jsfiddle.net/dbwhddn10/rvBKJ/15/

2015년 3월 17일 화요일 오전 7시 33분 0초 UTC+9, Aimery Marsily 님의 말:

[Sander Elias]

Hi Aimery,


This is mostly a problem with how jQuery works. As Jongwoo pointed out, the DOM is not created when ng-if=true, and it is hidden when you use ng-show.
jQuery scans the DOM at the DOMContentLoaded event, about the same time angular kicks in. This causes a race condition in your case. Angular is removing/hiding elements. jQuery tries to process all its helpers.

There are only 2 way's out to get this to work reliable. 

   1. Don't use angular to hide/remove stuff from your page at page load. 

   2. wrap the needed jQuery plugins into a angular wrapper.

Hope this helps a bit,

Regards

Sander