對象未在離子幻燈片盒中創建

Question

我有一個離子幻燈片盒，其中一張幻燈片包含進度條（來自here）。我初始化進度條的方式是在滑動控制器：

//partial code 

var appControl = angular.module('volCtrlPanel.controllers', []); 

appControl.controller('VolIndCtrl', function($scope, $state, $http, $rootScope) { 
    var circle = new ProgressBar.Circle('#progress', { 
    color: '#FCB03C', 
    trailColor: '#ddd', 
    strokeWidth: 3, 
    duration: 55 
    }); 

    var defaultVol = 0; 

    circle.set(defaultVol); 

而我的div包含進度條是在我的index.html模板：

<script id="templates/control.html" type="text/ng-template"> 
     <ion-view> 
      <ion-slide-box on-slide-changed="slideHasChanged($index)"> 
       <ion-slide> 
       <div class="center" id="background"> 
        <div id="button-container"> 
        <!-- this is the container for progress bar --> 
        <div class="progress" id="progress"></div> 

        </div> 
       </div> 
       </ion-slide> 
      </ion-slide-box> 
     </ion-view> 
    </script>   

不過，我得到一個錯誤表示進度條容器不存在。

ionic.bundle.js:20434 Error: Container does not exist: #progress 

我沒有得到這個錯誤，如果我刪除幻燈片框標籤，但我需要它是一張幻燈片。容器顯然存在於div中，所以我不確定離子滑塊爲什麼會突然改變。它讓我認爲進度條對象在幻燈片中沒有被創建？謝謝你的幫助！

Answer 1

我通過在離子的$ ionicView.beforeEnter狀態中創建Circle來解決此問題。

「容器不存在」發生是因爲它試圖找到一個尚不存在的容器。因此，我在加載視圖之前先將Circle初始化。