[英]jquery don't work with angular
当我尝试将网站更改为角度应用程序时遇到问题。 我有一些jquery滑块,当我将网站分为多个部分时,我使用角度JS将它们链接在一起,但我没有工作,所以我无法弄清楚问题出在哪里。
那是我主页上的字幕代码,无法使用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>
这就是它的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不起作用
谁能帮我做什么
您需要将$ jquery调用包装在$ scope。$ apply(function(){... jquery here ...});中。
原因是在准备好文档后,按角度加载模板。 当请求模板时,会有一个异步的AJAX调用。 因此,您的jquery代码已执行,但DOM尚未被angular修改。
一个好的做法是创建指令。
您应该将自定义JQuery插件包装到custom指令中 。 这是必要的,因为您的JQuery插件可能会在Angular完成DOM修改之前附加其处理程序,创建一些标记等。 甚至JQuery插件在Angular完成DOM修改后就可以工作了,但在Angular进行新一轮DOM修改后,它仍然会失效。 因此,最好,最正确的方法是编写您自己的指令,该指令将用作JQuery插件的包装。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.