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

###前提・実現したいこと
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

行動規範の内容に同意します

回答1件

ベストアンサー

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ありきのアプリを作成しているので、これが動かないことには前に進めませんので、この質問で挙げた形で実行できるようなんらかの手段を検討するしかなさそうです。。

行動規範の内容に同意します