javascript - 当我为来自服务器的数据实现一些更 Angular js 代码时，轮播停止工作

Question

早些时候，我实现了旋转木马(silder)，效果很好。

我之前的代码:

  <div class="wrapper">
    <div class="jcarousel-wrapper" style="margin:5px auto;">
                 <div class="jcarousel ">
                    <ul class="row" style="border-bottom: 1px solid #f68200;padding-bottom: 0px;">
                       <li>
                          <div class="span3">
                             <a href="#"><img src="./images/homeSlider01.jpg" style="width: 225px;height: 220px;"/></a>
                             <p ng-repeat="label in carouselOfLocationLabels | filter:'Location6'" class="home-slider1" style="text-align:left;"> {{label.text}}</p>
                          </div>
                       </li>
                       .......
                       .......                  
                    </ul>
                 </div>
                 <a href="#" class="jcarousel-control-prev">prev</a>
                 <a href="#" class="jcarousel-control-next">next</a>
              </div>
           </div>
         </div>

然后我修改了几行以便从服务器响应中获取图像。就是这样。

这里，当前代码是:

    <div class="wrapper">
           <div class="jcarousel-wrapper" style="margin:5px auto;">
                 <div class="jcarousel ">
                 <input type="hidden" id="slider1length" value="{{featuredListSlider1Length}}"/>
                    <ul class="row" style="border-bottom: 1px solid #f68200;padding-bottom: 0px;">
                       <li class="featuredListSlider1" ng-repeat="label in featuredListSlider1">
                          <div  class="span3">
                             <div id="featuredListSlider1{{$index}}" style="margin: -3.5%;">{{label.url}}</div>
                             <p class="home-slider1" style="text-align:left;"> {{label.title}}{{label.price}}</p>
                          </div>
                       </li>
                    </ul>
                 </div>
                 <a href="#" class="jcarousel-control-prev">prev</a>
                 <a href="#" class="jcarousel-control-next">next</a>
              </div>
           </div>
        </div>

它以相同的格式显示，服务器响应图像良好，但它停止滑动。

在控制台中，我只发现一个错误:(当我单击上一个或下一个控件时)

 "Uncaught TypeError: Cannot read property 'index' of null "

不知道为什么它停止工作。

如有任何建议，我们将不胜感激。

Answer 1

根据 jCarousel ( https://github.com/jsor/jcarousel/blob/master/dist/jquery.jcarousel.js ) 的代码，我的猜测是它检测到 <input> <div class="jcarousel "> 内的元素并将其视为不包含列表。是否可以将其移至轮播 div 之外？

<div class="wrapper">
       <div class="jcarousel-wrapper" style="margin:5px auto;">
             <input type="hidden" id="slider1length" value="{{featuredListSlider1Length}}"/>
             <div class="jcarousel ">
                <ul class="row" style="border-bottom: 1px solid #f68200;padding-bottom: 0px;">
                   <li class="featuredListSlider1" ng-repeat="label in featuredListSlider1">
                      <div  class="span3">
                         <div id="featuredListSlider1{{$index}}" style="margin: -3.5%;">{{label.url}}</div>
                         <p class="home-slider1" style="text-align:left;"> {{label.title}}{{label.price}}</p>
                      </div>
                   </li>
                </ul>
             </div>
             <a href="#" class="jcarousel-control-prev">prev</a>
             <a href="#" class="jcarousel-control-next">next</a>
          </div>
       </div>
    </div>