Angular Carousels：未捕獲TypeError：在Angular JS中使用Carousels時，無法讀取未定義的屬性'offsetWidth'

Question

在我問完這個問題之前，但這對我來說似乎不是問題。 我在angularJS中使用純文本輪播，此示例作為參考。

我正在嘗試使用角度數組的第一個索引元素為輪播設置活動類，然后其他項將來自第二個索引。 它顯示了活動元素，但是當我嘗試單擊第二個元素時，出現了以上錯誤。

以下是我到目前為止所做的事情。

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>

有人可以幫助我了解此處的輪播顯示以及錯誤的原因嗎，我已按照另一篇文章中所述設置了active元素，但仍然無法解決問題。

提前致謝

Answer 1

您的ng-repeat將為消息中的每個項目創建一個帶有“ carousel-inner”類的新outter 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 。

Answer 2

我發現問題不在於“ Active”類，而是與角度ng-repeat中“ $ index”的用法有關。 在設置滑動的情況下，

data-slide-to="$index"應該替換為data-slide-to="{{$index}}"

當我們嘗試單擊幻燈片時，設置為$ index的值的數據目標為null，因此發生未定義的錯誤。 其余代碼沒有問題，並且錯誤已修復。

Angular Carousels：未捕獲TypeError：在Angular JS中使用Carousels時，無法讀取未定義的屬性'offsetWidth'

問題描述

2 個解決方案

解決方案1
1 2016-12-07 14:44:54

解決方案2
0 已采納 2016-12-07 21:52:16

Angular Carousels：未捕獲TypeError：在Angular JS中使用Carousels時，無法讀取未定義的屬性&#39;offsetWidth&#39;

問題描述

2 個解決方案

解決方案1 1 2016-12-07 14:44:54

解決方案2 0 已采納 2016-12-07 21:52:16

Angular Carousels：未捕獲TypeError：在Angular JS中使用Carousels時，無法讀取未定義的屬性'offsetWidth'

解決方案1
1 2016-12-07 14:44:54

解決方案2
0 已采納 2016-12-07 21:52:16