質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

1回答

1930閲覧

ons-carouselの操作ができずに困っています(carousel is not defined)

tato.aoki

総合スコア33

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2017/11/11 02:18

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ApplicationCtrlのスコープ内にvar="carousel"が見つからないのではないでしょうか。

あくまで例えばですが、carousel.htmlを以下のように変更しては如何でしょう?

HTML

1<ons-page ng-controller="ApplicationCtrl as app"> 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>

なおmonacaでの開発時には、HTMLを分割するのではなく、ons-templateを用いてindex.html内に全てのHTML部分の記述をすることがmonaca開発元からは推奨されているようです。
私自身もHTMLの分割は行っていますが、上記については承知の上で、HTMLを別ファイルとして管理する方針を選択しているという認識は必要と思われます。

投稿2017/11/11 15:39

akabee

総合スコア1947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問