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

我通过在Ionic的$ ionicView.beforeEnter状态下创建Circle来修复此问题。

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

对象不是在离子滑动框中创建的

1 个答案: