Onsen-ui Carrousel var атрибут не работает с Tabbar
Я недавно работал над onsen-ui и застрял, когда пытался сослаться на вар Carrousel (var="carousel"
) в компонентах Tabbar и Navigator.
Код работает, пока я не попытаюсь использовать вкладки. Я получаю следующую ошибку:
Uncaught (в обещании) TypeError: Невозможно прочитать свойство undefined
Я устала от решения Pageinit, но, похоже, оно не работает.
Здесь под HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script src="lib/onsen/js/angular/angular.min.js"></script>
<script src="lib/onsen/js/onsenui.min.js"></script>
<script src="lib/onsen/js/angular-onsenui.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppCtrl">
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">1</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">2</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>
И app.js
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('AppCtrl',['$scope', function($scope) {
}]);
module.controller('carouselCtrl',['$scope', function($scope) {
ons.ready(function() {
$scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
$scope.$apply();
$scope.carousel.on('postchange', function (event) {
$scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
$scope.$apply()
});
});
}]);
У вас есть идеи, откуда возникла проблема?
Большое спасибо за ваше время.
1 ответ
Я добавил вкладку в ваш HTML-код и поместил ее в коде. Похоже на работу? Можете ли вы указать, что происходит, когда вы получаете ошибку?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
</head>
<body ng-controller="AppCtrl">
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="home2.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">1</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">2</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="home2.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">3</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">4</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>