我有一个 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 滑动盒突然改变了一切。这让我想到在幻灯片中没有创建进度条对象?感谢您的帮助!
最佳答案
我通过在 Ionic 的 $ionicView.beforeEnter 状态中创建 Circle 来解决这个问题。
“容器不存在”的发生是因为它试图找到一个尚不存在的容器。因此,我将 Circle 的初始化放在加载 View 之前。
关于javascript - 对象未在 ionic 滑动盒中创建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36961595/