当我尝试将我的网站更改为有角度的应用程序时，我遇到了问题。 我有一些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不工作
任何人都可以帮助我做我做的事情
答案 0 :(得分：0)
你需要在$ scope中包装你的jquery调用。$ apply（function（）{... jquery here ...}）;
原因是当文档准备就绪时，角度加载模板。当请求模板时，有一个异步的AJAX调用。所以你的jquery代码被执行但DOM还没有被angular修改过。
一个好的做法是创建指令。
答案 1 :(得分：0)
您应该将自定义JQuery插件包装到custom directive中。 这是必要的，因为你的JQuery插件可能会附加它的处理程序，在Angular完成DOM修改之前创建一些标记等。或者即使JQuery插件在Angular完成DOM修改之后仍然可以工作，它仍然会在Angular新一轮DOM修改后被破坏。因此，最好和最正确的方法是编写自己的指令，它将成为JQuery插件的包装器。