質問編集履歴

4 記述ミス

lion_

lion_ score 34

2017/04/06 11:53  投稿
ons-lazy-repeatのタグ内でng-clickが使用できない。
###前提・実現したいこと
monacaクラウドIDE、onsenUI2.2です。
質問は掲題の通りでons-lazy-repeatを使用するとng-clickが使用できません。
当初domを操作していることが問題なのかと考えましたが、直接ng-clickを書き込んでもNGでした。
※使用できない＝タップしても何も起きません。エラーもでません。
そこで単純にons-lazy-repeatタグを除去したところ正常に動作しました。
さすがにこれでは使い道がないので仕様ではないと思っていますが、この問題を解決する方法はありませんでしょうか。。
```html
<ons-template id="hoge.html">
<ons-page ng-controller="HogeCtrl as hoge">
<ons-lazy-repeat id="list">
   <ons-list-item>
       <div ng-click="hoge.popP()">hoge</div>
   </ons-list-item>
</ons-lazy-repeat>
</ons-page>
</ons-template>
```
```javascript
module.controller("HogeCtrl", function() {
   document.addEventListener('init', getList, false);
  this.popP = function() {
     alert('hoge')
 };
});   
   
function getList() {
   var lazyRepeat = document.getElementById('list');
       lazyRepeat.delegate = {
           createItemContent: function(i, template) {
               var dom = template.cloneNode(true);
               return dom;
           },
           
           countItems: function() {
               return 15;
           },
           destroyItem: function(index, item) {
               console.log('Destroyed item with index: ' + index);
           }
       };
       lazyRepeat.refresh();
   }
   lazyRepeat.delegate = {
       createItemContent: function(i, template) {
           var dom = template.cloneNode(true);
           return dom;
       },
       
       countItems: function() {
           return 15;
       },
       destroyItem: function(index, item) {
           console.log('Destroyed item with index: ' + index);
       }
   };
   lazyRepeat.refresh();
}
```
  • Onsen UI

    451 questions

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

  • Monaca

    1538 questions

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

lion_

lion_ score 34

2017/04/06 11:10  投稿
ons-lazy-repeatのタグ内でng-clickが使用できない。
###前提・実現したいこと
monacaクラウドIDE、onsenUI2.2です。
質問は掲題の通りでons-lazy-repeatを使用するとng-clickが使用できません。
当初domを操作していることが問題なのかと考えましたが、直接ng-clickを書き込んでもNGでした。
※使用できない＝タップしても何も起きません。エラーもでません。
そこで単純にons-lazy-repeatタグを除去したところ正常に動作しました。
さすがにこれでは使い道がないので仕様ではないと思っていますが、この問題を解決する方法はありませんでしょうか。。
```html
<ons-template id="hoge.html">
<ons-page ng-controller="HogeCtrl as hoge">
<ons-lazy-repeat id="list">
   <ons-list-item>
       <div ng-click="hoge.popP()">hoge</div>
   </ons-list-item>
</ons-lazy-repeat>
</ons-page>
</ons-template>
```
```javascript
this.popP = function() {
alert('hoge')
};
module.controller("HogeCtrl", function() {
   document.addEventListener('init', getList, false);
 　this.popP = function() {
　   　alert('hoge')
　　};
});   
   
function getList() {
   var lazyRepeat = document.getElementById('list');
       lazyRepeat.delegate = {
           createItemContent: function(i, template) {
               var dom = template.cloneNode(true);
               return dom;
           },
           
           countItems: function() {
               return 15;
           },
           destroyItem: function(index, item) {
               console.log('Destroyed item with index: ' + index);
           }
       };
       lazyRepeat.refresh();
   }
}
```
  • Onsen UI

    451 questions

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

  • Monaca

    1538 questions

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

lion_

lion_ score 34

2017/04/06 10:03  投稿
ons-lazy-repeatのタグ内でng-clickが使用できない。
###前提・実現したいこと
monacaクラウドIDE、onsenUI2.2です。
質問は掲題の通りでons-lazy-repeatを使用するとng-clickが使用できません。
当初domを操作していることが問題なのかと考えましたが、直接ng-clickを書き込んでもNGでした。
※使用できない＝タップしても何も起きません。エラーもでません。
そこで単純にons-lazy-repeatタグを除去したところ正常に動作しました。
さすがにこれでは使い道がないので仕様ではないと思っていますが、この問題を解決する方法はありませんでしょうか。。
```html
<ons-template id="hoge.html">  
<ons-page ng-controller="HogeCtrl as hoge">  
<ons-lazy-repeat id="list">
   <ons-list-item>
       <div ng-click="">hoge</div>
       <div ng-click="hoge.popP()">hoge</div>
   </ons-list-item>
</ons-lazy-repeat>
```
</ons-page>
</ons-template>
```
```javascript
this.popP = function() {
alert('hoge')
};
```
  • Onsen UI

    451 questions

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

  • Monaca

    1538 questions

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

lion_

lion_ score 34

2017/04/06 01:19  投稿
ons-lazy-repeatのタグ内でng-clickが使用できない。
###前提・実現したいこと
monacaクラウドIDE、onsenUI2.2です。
質問は掲題の通りでons-lazy-repeatを使用するとng-clickが使用できません。
当初domを操作していることが問題なのかと考えましたが、直接ng-clickを書き込んでもNGでした。
※使用できない＝タップしても何も起きません。エラーもでません。  
そこで単純にons-lazy-repeatタグを除去したところ正常に動作しました。
さすがにこれでは使い道がないので仕様ではないと思っていますが、この問題を解決する方法はありませんでしょうか。。
```html
<ons-lazy-repeat id="list">
   <ons-list-item>
       <div ng-click="">hoge</div>
   </ons-list-item>
</ons-lazy-repeat>
```
  • Onsen UI

    451 questions

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

  • Monaca

    1538 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る