jquery не работает с угловым

Question

У меня проблема, когда я пытаюсь изменить свой сайт на угловое приложение. У меня есть некоторые слайдеры jquery, и когда я разделил свой сайт на частичные, и я связал их с помощью углового JS, я не работал, я не могу понять, в чем проблема.

это мой шатёр код в моей домашней странице, которая плохо ссылку его с помощью углового:

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

и это JQuery для него:

/* 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); 
// 
// 
// 
//} 

и здесь я звоню мой JS в индексе страница для углового

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

моя страница пришла, и моя угловая работа прекрасна, но я не знаю почему Jquery dont работа

может кто-нибудь, пожалуйста, помогите мне, что я делать

Answer 1

Вам нужно обернуть Jquery звонки в $ объеме $ применяется (функция() {... JQuery здесь ...}).

Причина в том, что, когда документ готов, угловая загрузка шаблонов. Когда запрашивается шаблон, есть вызов AJAX, который является асинхронным. Таким образом, ваш код jquery выполняется, но DOM еще не был изменен угловым.

Хорошей практикой является создание директив.

Answer 2

Вы должны обернуть свой пользовательский плагин JQuery в custom directive. Это необходимо, потому что ваш плагин JQuery может прикреплять его обработчиками, создавать некоторые разметки и т. Д. До того, как Angular закончил модификацию DOM. Или, даже если плагин JQuery будет выполнять свою работу после модификации DOM с угловым дополнением, он все равно будет поврежден после нового раунда модификаций DOM от Angular. Таким образом, лучший и самый правильный способ - написать свою собственную директиву, которая станет оболочкой для плагина JQuery.