2016-01-19 23 views
0

我有一個問題,當我嘗試將我的網站更改爲角應用程序。 我有一些jquery滑塊,當我把我的網站分成部分和我使用角JS鏈接他們我沒有工作,我不知道是什麼問題。jquery不能使用角

它採用了棱角分明這病鏈接這是我的帳篷代碼在我的主頁:

<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的:我是我的JS在指數

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

這裏前來角度

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

我的網頁頁面,我的角,做工精細,但我不知道爲什麼Jquery的不要工作

任何人都可以請幫我我做什麼

+0

我把創建了一個指令,我打電話給我的功能在jQuery的,但它仍然不工作myprojectApp.directive(「sliderMarquee」,函數(){ 回報{ 限制:「A」, 鏈接:功能(範圍,元素,attrs){ }; };(元素).marqueeGatherData(範圍。$ eval和多數民衆當我使用該指令在

回答

0

你需要用在$範圍的jQuery的調用$申請(函數(){... jQuery的這裏...})。

原因是當文檔準備就緒時,角度加載模板。請求模板時,會有一個異步的AJAX調用。所以你的jQuery代碼被執行,但DOM沒有被角度修改。

一個好的做法是創建指令。

0

您應該將自定義JQuery插件包裝到custom directive中。 這是必要的,因爲您的JQuery插件可能會附加它的處理程序,在Angular完成DOM修改之前創建一些標記等。或者即使JQuery插件在Angular完成DOM修改後仍然可以使用它,它在Angular新一輪DOM修改後仍然會被破壞。所以最好的和最正確的方法是編寫你自己的指令,這將是JQuery插件的包裝。

+0

你好,我把一切的索引,但我沒有工作,我不知道什麼是problem.myprojectApp.directive(「sliderMarquee」,函數(){ 回報{ 限制:「A」 , 鏈接:功能(範圍,元件,ATTRS){ $(元件).marqueeGatherData(範圍$的eval(attrs.sliderMarquee));} }; });我叫它在index.html

+0

叫它

+0

我稱它但我不知道我不傳遞數據到marqueeGatherData函數我只是在jquery文件中運行它,它運行其他功能,請你給我看看方式我應該在我的插件中傳遞數據圖像的數據是什麼? –