Question

我第一次使用onsen ui和angular。

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

我开始使用这个代码，它或多或少地修改了使用ng-repeat的onsen ui样本轮播代码并设置了初始索引。

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

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

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

HERE您可以找到有效的CodePen示例

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

1 个答案: