onsen ui使用ng重复并设置初始索引导航到转盘

Question

我第一次使用onsen ui和angular。

基本上，我希望通过全屏旋转木马从索引导航到另一个页面，并显示特定的旋转木马项目。

我从这段代码开始，它或多或少是修改为使用ng重复并设置初始索引的onsen-ui示例carousel代码。

html

<ons-navigator title="Navigator" var="myNavigator">
<ons-page ng-controller="MyController">
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item ng-repeat="i in ['gray', '#085078', '#373B44', '#D38312']" style="background-color: {{i}};">
<div class="item-label">{{i}}</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">Swipe left or right</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>

app.js

var app = ons.bootstrap();
app.controller("MyController", function($scope) {
ons.ready(function() {
carousel.setActiveCarouselItemIndex(2);
});
});

当旋转木马成为主页时，这似乎很好。

设置初始索引似乎不适用于ng重复。

html

<ons-carousel swipeable overscrollable auto-scroll fullscreen initial-index="2" var="carousel">

然后，当我尝试使用转盘导航到页面时，它显示转盘未定义。

我还尝试在旋转木马上添加一个事件侦听器，因为当时似乎没有加载。

document.addEventListener('ons-carousel:init', function() {
carousel.setActiveCarouselItemIndex(2);
});

事件侦听器已触发，但setActiveCarouselItemIndex似乎没有执行任何操作。

当我不使用ng repeat并且在html中有一堆ons旋转木马项目时，同样的代码也能工作。

我开始的内容：http://codepen.io/anon/pen/aObNqW

我陷入困境的一个简单例子是：http://codepen.io/anon/pen/yNLOvY

如果有更好的方法，我很想知道！

Answer 1

您的代码很好，问题是您试图在onsen准备好时切换carousel页面，也就是在创建carousel元素之前。您可以添加一个超时函数使其工作，也可以在加载转盘后调用脚本。如果你选择第一个选项，只需以这种方式修改你的控制器：

var app = ons.bootstrap();
app.controller("MyController", function($scope) {
ons.ready(function() {
setImmediate(function(){
carousel.setActiveCarouselItemIndex(2);
});
});
});

在这里你可以找到一个工作的CodePen示例