Angular Carousels: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined while using carousels with Angular JS

Question

在我询问之前，我已经完成了，但这对我来说似乎不是问题。我在 angularJS 中使用纯文本轮播，以 this 示例作为参考。

我正在尝试使用 angular 数组的第一个索引元素为轮播设置活动 class，然后其他项目将来自第二个索引。它显示了活动元素，但是当我试图点击第二个元素时，它给出了上述错误。

以下是我到目前为止所做的。

HTML 文件：

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>

</head>

<div id="myCarousel" style="height:100px" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    
    <ol layout="row" class="carousel-indicators" >
    <div  ng-repeat="message in messages">
      <li  data-target="#myCarousel" data-slide-to="$index" class="active" ng-if="$index === 0" ></li>
      <li  data-target="#myCarousel" data-slide-to="$index"  ng-if="$index !== 0" ></li>
   </div>
   
   
    </ol>
    
    <!-- Wrapper for slides -->
    <div layout="row"  class="carousel-inner" ng-repeat="message in messages"  role="listbox">
      <div class="item active" ng-if="$index === 0">
        {{message.text}}
      </div>
     <div  class="item" ng-if="$index !== 0">
        {{message.text}}
      </div>
  
    </div>


  </div>

谁能帮我理解这里的旋转木马显示以及为什么会出现错误，我已经按照另一个post中提到的设置了活动元素，但它仍然没有解决问题。

提前致谢

Answer 1

您的 ng-repeat 将为邮件中的每个项目创建一个新的外部 div 和 "carousel-inner" class，而不是您想要做的是将其移动到内部，像这样：

<div layout="row"  class="carousel-inner product-carousel" role="listbox">
    <div class="item active" ng-if="$index === 0" ng-repeat-start="message in messages">
       {{message.text}}
    </div>

    <div  class="item" ng-if="$index !== 0" ng-repeat-end>
       {{message.text}}
    </div>
</div>

当您想迭代重复多个元素而不将它们封装在另一个元素中时，请使用 ng-repeat-start 和 ng-repeat-end。

Answer 2

我发现问题不在于 "Active" class，而是在 angular ng-repeat 中使用“$index”。在设置滑动的条件下，

data-slide-to="$index" 应替换为 data-slide-to="{{$index}}"

当我们试图点击幻灯片时，设置为 $index 给定值的数据目标变为空值，因此发生未定义错误。其余代码没有问题，错误已修复。

Angular Carousels: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined while using carousels with Angular JS

Angular Carousels: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined while using carousels with Angular JS

javascript

carousel

twitter-bootstrap

angularjs

angular-carousel