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

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

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

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

2528閲覧

ons-lazy-repeatのタグ内でng-clickが使用できない。

lion_

総合スコア34

Onsen UI

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/04/05 16:16

編集2017/04/06 02:53

###前提・実現したいこと
monacaクラウドIDE、onsenUI2.2です。

質問は掲題の通りでons-lazy-repeatを使用するとng-clickが使用できません。
当初domを操作していることが問題なのかと考えましたが、直接ng-clickを書き込んでもNGでした。
※使用できない=タップしても何も起きません。エラーもでません。

そこで単純にons-lazy-repeatタグを除去したところ正常に動作しました。
さすがにこれでは使い道がないので仕様ではないと思っていますが、この問題を解決する方法はありませんでしょうか。。

html

1<ons-template id="hoge.html"> 2<ons-page ng-controller="HogeCtrl as hoge"> 3<ons-lazy-repeat id="list"> 4 <ons-list-item> 5 <div ng-click="hoge.popP()">hoge</div> 6 </ons-list-item> 7</ons-lazy-repeat> 8</ons-page> 9</ons-template>

javascript

1 2module.controller("HogeCtrl", function() { 3 document.addEventListener('init', getList, false); 4 this.popP = function() { 5 alert('hoge') 6 }; 7}); 8 9function getList() { 10 var lazyRepeat = document.getElementById('list'); 11 lazyRepeat.delegate = { 12 createItemContent: function(i, template) { 13 var dom = template.cloneNode(true); 14 return dom; 15 }, 16 17 countItems: function() { 18 return 15; 19 }, 20 destroyItem: function(index, item) { 21 console.log('Destroyed item with index: ' + index); 22 } 23 }; 24 lazyRepeat.refresh(); 25} 26 27

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

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

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

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

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

guest

回答1

0

ベストアンサー

ons-list-itemにtappable属性を付加してみてください。

HTML

1<ons-lazy-repeat id="list"> 2 <ons-list-item tappable> 3 <div ng-click="">hoge</div> 4 </ons-list-item> 5</ons-lazy-repeat>

※追記

再現できませんでした。。。

イメージ説明

※追記

onsenUIのバージョンです。

イメージ説明

※追記

動作確認できたコードです。

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/angular/angular.min.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 11 12 <link rel="stylesheet" href="components/loader.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 14 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 15 <link rel="stylesheet" href="css/style.css"> 16 17 <script> 18 ons.bootstrap() 19 .controller("HogeCtrl", function() { 20 21 this.delegate = { 22 createItemContent: function(i) { 23 return ons._util.createElement( 24 "<ons-list-item tappable ng-click='hoge.popP()'>Item " + i + "</ons-list-item>" 25 ); 26 }, 27 28 countItems: function() { 29 return 50; 30 } 31 } 32 33 this.popP = function() { 34 alert('hoge') 35 }; 36 }); 37 38 ons.ready(function() { 39 console.log("Onsen UI is ready!"); 40 }); 41 42 </script> 43</head> 44<body> 45<ons-page ng-controller="HogeCtrl as hoge"> 46 <ons-list> 47 48 <ons-list-item ons-lazy-repeat="hoge.delegate"> 49 {{ item }} 50 </ons-list-item> 51 52 </ons-list> 53</ons-page> 54</body> 55</html> 56

投稿2017/04/05 23:27

編集2017/04/06 04:05
akabee

総合スコア1947

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

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

lion_

2017/04/06 00:40

回答ありがとうございます。 tappableを付与することでtapされているというアクション(グレーになる)は追加されましたが 肝心のng-clickの動作は引き続き行われません。。
akabee

2017/04/06 00:45

おや、そうですか?ではJavaScriptも開示いただけませんか。コーディングの問題という可能性は大いにあります。提示いただいたHTMLですと、ng-clickに関数名も書いてありませんし。。(関数名が開示できないため意図的に削除しているのだと思っていますが、これが実際のコードなのであれば100%動きません)
lion_

2017/04/06 00:59

引き続きありがとうございます。 ここの中の処理は何でもよいです。質問にも記載しておりますが、 「ons-lazy-repeatタグを除去したところ正常に動作しております」
lion_

2017/04/06 01:03

念のため追加しておきました。
akabee

2017/04/06 01:23 編集

回答を編集しました。再現できませんでした。原因は他の箇所にあるのではないでしょうか。もしくは事象を読み誤っているのではないでしょうか。なお画像はプレビュー画面のものですがAndroidのmonacaデバッガーで確認しても問題ありませんでした。
lion_

2017/04/06 01:49 編集

すみません、onsenuiのバージョンはおいくつでしょうか? こちら2.2を使用しています。 2.2からはons-lazy-repeatにheightに依存しない修正が入っております。 Onsen UI (Monaca Version)は使用しておりません。 詳しくはこちらをご覧ください。 https://teratail.com/questions/70143
lion_

2017/04/06 02:05

追記になります。 申し訳ありません、例で挙げたコードではalertは表示されますね。。 どうやらdelegate#createItemContentを記述することでng-clickが押下できなくなるようです。 コードを追記しておきます。
lion_

2017/04/06 02:11

コード追加しました。
akabee

2017/04/06 02:32 編集

まずコンパイルエラーが出ており、getList関数の中身を全て削除するとコンパイルエラーが解消し、alertも正常に動作するように見えますので、ons-lazy-repeatは関係なく、getList関数内に書かれた処理が問題という切り分けができます。lionさんが望むと思われる形に修正できればコード提供しますが、いつになるかは分かりません。お互いのためにも、再現用のコードはできるだけ再現性のある内容にしましょう。
lion_

2017/04/06 02:46 編集

onsenuiのバージョンをお伺いできますか? 先ほど上でも記載しておりますが、onsenui2.2からons-lazy-repeatの仕様が変わりました。 相互のバージョンがずれていると話がかみ合わないのでakabeeさんと確認している環境が同じであることを確認させてください。 また、 「delegate#createItemContentを記述することでng-clickが押下できなくなるようです。」 と記載しているのでgetListの中身をすべて削除すれば正常に動作するのは認識しています。
akabee

2017/04/06 02:46

回答を受けて、2.2.0をインストールしたつもりです。回答編集しておきました。これではダメで別手順があれば対応してみます。
lion_

2017/04/06 02:49

>回答を受けて、2.2.0をインストールしたつもりです。 なるほど、返信ありがとうございます。お手数をお掛けしますm(__)m
lion_

2017/04/06 02:54

>まずコンパイルエラーが出ており こちら失礼いたしました。}が多かったので修正しました。
akabee

2017/04/06 04:03 編集

動作しました。多少、タグ構成等を変更しています。こちら→https://ja.onsen.io/v2/docs/angular1/ons-lazy-repeat.html のURLの記法で書いてみました。もとの書き方ですと、どうもcontrollerのスコープがons-list-itemで外れているように思います。ng-clickは使用したいようですのでangulerJSの利用は前提とされていると思うのですが、angularJSを前提にするのであればこの書き方でどうでしょうか。回答に動作したコードを記載しておきましたのでご確認下さい。
lion_

2017/04/06 05:20

ありがとうございますm(__)m こちらでも今同様のコードで確認中ですが 「ons-lazy-repeat must be a descendant of an <ons-page> or an element.」 というエラーがでます。。 onsenui.jsの5289行目のエラーのようですが・・・。
akabee

2017/04/06 05:47

11:32のコメント時に出ていたエラーはそれです。直訳すると、「ons-lazy-repeatはons-pageもしくは要素の子要素でなければいけません」という感じでしょうか。OnsenUIで想定されている要素の構成と外れた構成になってしまっているのだと思います。 「OnsenUIで想定される構成」がどんなものなのかは正直言って私もよく分かりませんが、リファレンスからどういう構成なら動くのかを推定し動かしています。 そのあたりがプラグイン利用の難しいところですが・・
lion_

2017/04/06 05:53

うーん・・・ 私の環境だとons-lazy-repeat="hoge.delegate"をons-list-itemに記述すると上記エラーで動きませんね。。。 同じonsenui2.2なのにこういうことなんてあるのでしょうか・・。 ons-navigatorを使用し、ons-templateを記述していること以外はすべて同コードになっているのですが・・。
akabee

2017/04/06 06:47 編集

ちょっとしたことでも、プラグイン提供元の想定から外れれば当然ながら動かなくなります。ons-templateを使いたいという想いがあるのであれば、まずそれが可能なのか、可能であるのであればどのように書けばよいのかは慎重に検討する必要があります。勿論、それがどう考えてもできておかしくない構成であれば、OnsenUIのバグという可能性もあります。やりたい構成を記載して頂ければ、どう書けばいいのかは私でも探ってみることは可能ですが・・・
lion_

2017/04/06 12:12

@akabeeさん 諸々ありがとうございます。どういう形にせよlazyrepeatありきのアプリを作成しているので、これが動かないことには前に進めませんので、この質問で挙げた形で実行できるようなんらかの手段を検討するしかなさそうです。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問