使用ng-重复和设置初始索引导航到旋转木马的onsen用户界面
使用ng-重复和设置初始索引导航到旋转木马的onsen用户界面
提问于 2015-04-21 17:41:04
我第一次使用的是onsen用户界面和角。
基本上，我希望从索引导航到另一个带有全屏旋转木马的页面，并显示一个特定的旋转木马项目。
我从这段代码开始，它或多或少是修改成使用ng-重复和设置初始索引的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-重复。
html
<ons-carousel swipeable overscrollable auto-scroll fullscreen initial-index="2" var="carousel">然后，当我试着用旋转木马导航到页面时，它说旋转木马是没有定义的。
我还尝试在旋转木马上添加一个事件侦听器，因为在那个时候似乎没有加载它。
document.addEventListener('ons-carousel:init', function() {
carousel.setActiveCarouselItemIndex(2);
});事件侦听器触发，但是setActiveCarouselItemIndex似乎什么也没做。
当我不使用ng-重复并且在html中有一组条目时，同样的代码也能工作。
我刚开始讲的是：http://codepen.io/anon/pen/aObNqW
我陷入困境的一个简单例子：http://codepen.io/anon/pen/yNLOvY
如果有更好的方法做这件事，我很想知道！
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-21 18:03:44
您的代码很好，问题是当onsen准备好时，您正在尝试切换旋转木马页面，这是在创建carousel元素之前。您可以添加一个超时函数来使其工作，也可以在加载旋转木马之后调用脚本。如果选择第一个选项，只需这样修改控制器：
var app = ons.bootstrap();
app.controller("MyController", function($scope) {
ons.ready(function() {
setImmediate(function(){
carousel.setActiveCarouselItemIndex(2);
});
});
});这里您可以找到一个实用的CodePen示例
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29786258
复制相关文章
相似问题
有旋转木马的onsen用户界面问题
ng-重复不使用onsen用户界面
Onsen用户界面旋转木马滑动列表项目
带Onsen用户界面的无止境旋转木马
AngularJS -ng-使用旋转木马重复
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
