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 JSAngular Carousels: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined while using carousels with Angular JS
【发布时间】：2016-12-07 14:21:45
【问题描述】：

在我问之前，我已经通过this，但这似乎不是我的问题。我在 angularJS 中使用纯文本轮播，以 this 示例作为参考。

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

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

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>

有人可以帮我理解这里的轮播显示以及为什么会出现错误，我已经设置了其他帖子中提到的活动元素，但它仍然不能解决问题。

提前致谢

【问题讨论】：

标签： javascript angularjs twitter-bootstrap carousel angular-carousel

【解决方案1】：

您的 ng-repeat 将为您的消息中的每个项目创建一个带有“carousel-inner”类的新外部 div，而不是将其移动到内部，如下所示：

<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。

【讨论】：

【解决方案2】：

我发现问题不在于“Active”类，而在于角度 ng-repeat 中“$index”的使用。在设置了滑动的情况下，

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

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

【讨论】：