离子滑动盒中未创建对象答案

【问题标题】：Object not created in ion slide box离子滑动盒中未创建对象
【发布时间】：2016-05-03 04:33:42
【问题描述】：

我有一个离子幻灯片盒，其中一张幻灯片包含一个进度条（来自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 中，所以我不确定为什么 ion slide box 会突然发生变化。它让我认为在幻灯片中没有创建进度条对象？感谢您的帮助！

【问题讨论】：

请发布您的所有代码，以便能够运行应用程序并重现问题

标签： javascript html css angularjs ionic-framework

【解决方案1】：

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

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

【讨论】：