AngularJS:图像滑块不在ng-view内部工作

时间:2017-03-04 18:49:38

标签: javascript jquery html angularjs

当我将它放在 ng-view div之外时,jquery图像滑块可以正常工作。但是当我在指令中移动它或将它注入 ng-view

时,它不起作用

的index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/js/lightslider.js"></script> 
<script>
   $(document).ready(function() {
  $("#content-slider").lightSlider({
            loop:true,
            keyPress:true
        });
        $('#image-gallery').lightSlider({
            gallery:true,
            item:1,
            thumbItem:9,
            slideMargin: 0,
            speed:500,
            auto:true,
            loop:true,
            onSliderLoad: function() {
                $('#image-gallery').removeClass('cS-hidden');
            }  
        });
});
</script>

<body ng-controller="mainController">
<div class="wrapper">
   <div id="main">
    <!--code works when moved here-->
    <div ng-view></div>

滑块的Html代码,它在指令中不起作用。

slider.html

    <div class="demo">
    <div class="item">            
        <div class="clearfix" style="max-width:474px;">
            <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                <li data-thumb="img/thumb/cS-1.jpg"> 
                    <img src="img/cS-1.jpg" />
                     </li>
                <li data-thumb="img/thumb/cS-2.jpg"> 
                    <img src="img/cS-2.jpg" />
                     </li>
                <li data-thumb="img/thumb/cS-3.jpg"> 
                    <img src="img/cS-3.jpg" />
                     </li> 
            </ul>
        </div>
    </div> 
</div> 

0 个答案:

没有答案