ons-carouselの「postchange」イベントを受け取って処理を行いたいのですが、どうしてもうまくできません。
サンプルに沿って「index.html」内に<ons-carousel>
を配置するとうまく動作するのですが、下記のコードのように<ons-navigator>
で別のHTMLファイルに<ons-carousel>
を配置すると「carousel is not defined」となってしまいます。
どうか、みなさまの知恵をお貸しいただければ幸いです。
【各ライブラリのバージョン】
AngularJS 1.5.7
OnsenUI 2.7.0
【ソースコード】
(ApplicationCtrl.js)
js
1var module = ons.bootstrap('app', [ 2 'onsen', 3]); 4 5module.controller('ApplicationCtrl', function () { 6 ons.ready(function () { 7 console.log(carousel); 8 //↑ここの出力は「ReferenceError: carousel is not defined」 9 10 carousel.on('postchange', function (e) { 11 console.group('postchange'); 12 console.log(e.carousel); 13 console.log(e.activeIndex); 14 console.log(e.lastActiveIndex); 15 console.groupEnd(); 16 }); 17 }); 18}); 19});
(index.html)
html
1<body ng-controller="ApplicationCtrl as app" ng-class="app.config.thema"> 2 <ons-navigator swipeable var="navi" page="Component/Template/intro.html"></ons-navigator> 3<script type="text/javascript" src="Component/Controller/ApplicationCtrl.js"></script> 4</body>
(carousel.html)・・・index.htmlのons-navigatorから読み込まれているページ
html
1<ons-page> 2 <ons-carousel fullscreen var="carousel"> 3 <ons-carousel-item style="background-color: #D770AD"> 4 <h1>First</h1> 5 </ons-carousel-item> 6 7 <ons-carousel-item style="background-color: #3BAFDA"> 8 <h1>Second</h1> 9 </ons-carousel-item> 10 </ons-carousel> 11</ons-page>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。