jquery don't work with angular

Question

i have a problem when i try to change my website to angular application. i have some jquery sliders and when i divided my website to partials and i linked them using angular JS i didnt work i cant figure out what is the problem.

that's my marquee code in my home page which ill link it using angular :

<div class="marquee">

        <div class="marquee_data">


<!--            FIRST PANEL-->
          <div class="marquee_panel" data-image="images/sliderImages/photo_beach">
            <h3>Secluded beaches</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod               tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="cta" href="">Learn more</a>


            </div>


<!--            SECOND PANEL-->
            <div class="marquee_panel" data-image="images/sliderImages/photo_city">
    <h3>Beautiful cityscape</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a class="cta" href="">Learn more</a>
</div>

<!--            THIRD PANEL-->

<div class="marquee_panel" data-image="images/sliderImages/photo_mountains">
    <h3>Magestic mountain peaks</h3>
    <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia.</p>

    <a class="cta" href="">Learn more</a>
</div>

        </div>






        </div>

and that's the jquery for it :

/* JavaScript Document */

var marqueeVars = {


    screenSize : '',
    width : 0,
    mobileSize : 600,
    autoPlay : 'true',
    currentPanel : 1,
    totalPanels : 0,
    timePassed : 0,
    timeToChange : 30,
    duration : 1250,
    inTransition : false,
    panelContent : Array


};

jQuery.noConflict();
$(document).ready(function(){



    marqueeGatherData();


});



function marqueeGatherData(){

    $('.marquee_data .marquee_panel').each(function(index){

//        WE are counting the panels
        marqueeVars.totalPanels = index + 1;
        var panel_image_l = $(this).attr('data-image')+'_l.jpg';
        var panel_image_s = $(this).attr('data-image')+'_s.jpg';
        var panel_caption = $(this).html();
        marqueeVars.panelContent[index] = '<div class="marquee_panel" data-image-s="'+panel_image_s+'" style="background-image:url('+panel_image_l+');"><div class="overlay"></div><div class="panel_caption">'+panel_caption+'</div></div>';


//        alert(panel_image_l);


    });


    var maqueeTimer = setInterval(marqueeAdvance,100);
}



function marqueeAdvance(){

    var marqueeWidth = $('.marquee').width();
    var currentSize = marqueeVars.screenSize;



    if( marqueeWidth > marqueeVars.mobileSize ){


        var newSize = 'large';

    }else{

        var newSize = 'small';
    }

    marqueeVars.screenSize = newSize;


    if( currentSize != newSize ){

        if( marqueeVars.screenSize == 'large' ){

            marqueeMultipanel();

        }else{

            marqueeSinglePanel();

        }

    }



    if ( marqueeVars.timePassed == marqueeVars.timeToChange ){


        marqueeVars.timePassed = 0;
        if( marqueeVars.autoPlay == true ){
            if( marqueeVars.currentPanel == marqueeVars.totalPanels ){

                $('.marquee_nav div:nth-child(1)').trigger('click');

            }else{
                   $('.marquee_nav div:nth-child('+(marqueeVars.currentPanel+1)+')').trigger('click');


            }

        }





    }else{  
    marqueeVars.timePassed += 1;

    }

}





function marqueeMultipanel(){


    marqueeVars.timePassed = 0;
    marqueeVars.autoPlay = true;

    var newHTML = '<div class="marquee_stage_large"><div class="marquee_container_1"></div><div class="marquee_nav"></div><div class="btn prev"></div><div class="btn next"></div></div>';

$('.marquee').html('').append(newHTML);


    for( i=0; i<marqueeVars.totalPanels; i++ ){


        $('.marquee_nav').append('<div></div>');


    }


    $('.marquee').hover(function(){

        marqueeVars.autoPlay = false;

    },function(){
        marqueeVars.autoPlay = true;
       marqueeVars.timePassed = Math.floor( marqueeVars.timeToChange / 2); 

    });



    $('.marquee .btn').on('click',function(){

            if( !marqueeVars.inTransition ){


                if( $(this).hasClass('prev') ){

                    marqueeVars.currentPanel -= 1;
                    if( marqueeVars.currentPanel < 1 ){


                        marqueeVars.currentPanel = marqueeVars.totalPanels;


                    }

                }else{


                    marqueeVars.currentPanel += 1;
                    if(marqueeVars.currentPanel > marqueeVars.totalPanels){ 


                        marqueeVars.currentPanel = 1;


                    }
                }

                $('.marquee_nav div:nth-child('+marqueeVars.currentPanel+')').trigger('click');
            }

    });

    $('.marquee_nav div').on('click',function(){

//        tell which one is selected clicked




    if( !marqueeVars.inTransition ){


        marqueeVars.inTransition = true;

                var navClicked = $(this).index();
                marqueeVars.currentPanel = navClicked + 1;


        $('.marquee_nav div').removeClass('selected');
        $(this).addClass('selected');


                $('.marquee_stage_large').append('<div class="marquee_container_2" style="opacity:0;"></div>');

                $('.marquee_container_2').html(marqueeVars.panelContent[navClicked]).animate({opacity:1},marqueeVars.duration,function(){
                    $('.marquee_container_1').remove();
                    $(this).addClass('marquee_container_1').removeClass('marquee_container_2');

                            marqueeVars.inTransition = false;


                });



    }

    });


    $('.marquee_nav div:first').trigger('click');


}




function marqueeSinglePanel(){
    $('.marquee').html('').append('<div class="marquee_stage_small">'+marqueeVars.panelContent[0]+'</div>');

    var panel_image_s = $('.marquee .marquee_stage_small .marquee_panel').attr('data-image-s');
    $('.marquee .marquee_stage_small .marquee_panel').css('background-image','url('+panel_image_s+')')


}




//debugger
//
//var debugTimer = setInterval(setDebugger,100);
//
//function setDebugger(){
//    
//    
//             $('.var1').html('screenSize = '+marqueeVars.screenSize);
//
//             $('.var2').html('width = '+marqueeVars.width);
//             $('.var3').html('mobileSize = '+marqueeVars.mobileSize);
//
//             $('.var4').html('autoPlay = '+marqueeVars.autoPlay);
//
//             $('.var5').html('currentPanel = '+marqueeVars.currentPanel);
//
//             $('.var6').html('totalPanels = '+marqueeVars.totalPanels);
//
//             $('.var7').html('timePassed = '+marqueeVars.timePassed);
//
//             $('.var8').html('timeToChange = '+marqueeVars.timeToChange);
//             $('.var9').html('duration = '+marqueeVars.duration);
//             $('.var10').html('inTransition = '+marqueeVars.inTransition);
//
//
//
//}

and here i am calling my js in the index page for angular

<script type="text/javascript" src="js/includes/marquee.js"></script>

my page come and my angular work fine but i dunno why the Jquery dont work

can anyone please help me what i do

Answer 1

You need to wrap your jquery calls in $scope.$apply(function() { ... jquery here ... });

The reason is that when the document is ready, angular loads the templates. When a template is requested, there is an AJAX call which is async. So your jquery code is executed but the DOM wasn't modified by angular yet.

A good practice is to create directives.

Answer 2

You should wrap your custom JQuery plugin into custom directive . It necessary because your JQuery plugin might attach it's handlers, create some markup and etc before Angular finished DOM modification. Or even if JQuery plugin will do it's work after Angular complete DOM modification, it still will be broken after new round of DOM modifications by Angular. So the best and the most right way is to write your own directive which will be a wrapper for JQuery plugin.