onsen ui 使用 ng-repeat 导航到 carousel 并设置初始索引

Question

我是第一次使用温泉 ui 和 angular。

基本上我希望从索引导航到具有全屏轮播的另一个页面，并显示特定的轮播项目。

我从这段代码开始，它或多或少是温泉 ui 示例轮播代码修改为使用 ng-repeat 并设置初始索引。

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-repeat。

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-carousel-items 时，同样的代码可以工作

我开始的时候：http://codepen.io/anon/pen/aObNqW

我被卡住的一个简单例子：http://codepen.io/anon/pen/yNLOvY

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

Answer 1

您的代码没有问题，问题是您试图在温泉准备就绪时切换轮播页面，这是在创建轮播元素之前。您可以添加超时功能以使其工作，或者在加载轮播后调用脚本。如果您选择第一个选项，只需这样修改您的控制器：

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

HERE 你可以找到一个有效的 CodePen 例子

onsen ui 使用 ng-repeat 导航到 carousel 并设置初始索引

onsen ui navigating to carousel using ng-repeat and setting initial index

onsen-ui