javascript - 对象未在 ionic 滑动盒中创建

Question

我有一个 ionic 幻灯片框，我的一张幻灯片包含一个进度条(来自 here)。我初始化进度条的方式是在滑动 Controller 中:

//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 中，所以我不确定为什么 ionic 滑动盒突然改变了一切。这让我想到在幻灯片中没有创建进度条对象？感谢您的帮助!

Answer 1

我通过在 Ionic 的 $ionicView.beforeEnter 状态中创建 Circle 来解决这个问题。

“容器不存在”的发生是因为它试图找到一个尚不存在的容器。因此，我将 Circle 的初始化放在加载 View 之前。