jQueryからOnsenUIの画面遷移を実行出来ますか?
初めて質問させて頂きます。何卒よろしくお願い致します。
質問内容はOnsenUIとjQueryをつかったハイブリッドアプリ実装に関する事で、jQuery側で動的に作成したli要素のOnでクリックイベントをハンドルした際に、OnsenUI側のons.navigatorに対してpushPageを発動させる為にはどのようにすれば宜しいでしょうか?
ページ構成としてはOnsenUIのスライディングメニューを使っておりますので、index.html内で下記のようにons-sliding-menuタグを記述し、
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px">
さらに同ページ内で各メニュー選択時にセットアップされるmain-pageごとにons.readyで必要処理を記述しております。
下記はスライディングメニュー選択時にセットされるページの1つで、Ajax通信で取得したデータを表示するためにjQueryで動的生成したli要素に対して、クリックイベントの中からOnsenUIのpushPageを実行して画面遷移しようとしています。
module.controller('ctrl_search.html', function($scope) {
ons.ready(function() {
$(".cs-ulh").on('click', 'li', function(){
myNavigator.pushPage('g_search_detail.html');
});
});
});
上記のように対象となるに対し、単純にpushPageと記述しても動作しません。
これを実現させる為にはどのようにすべきなのでしょうか?
※もう少し具体的な情報を追記させて頂きます。
■index.html
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
module.controller('ctrl_search.html', function($scope) {
ons.ready(function() {
// AJAX通信後に動的にli要素生成
function ajaxRequest(reqPrm){
var errcount = 0;
$.ajax({
},success: function(json){
for(var i=0; i<json.length; i++){
$(".cs-ulh").append(li要素を追加);
}
});
}
// 動的生成されたliクリックでsearch.detail.htmlに遷移
$(".cs-ulh").on('click', 'li', function(){
myNavigator.pushPage('g_search_detail.html');
});
});
});
■home.html
<ons-navigator var="myNavigator">
<ons-page ng-controller="ctrl_home.html">
<ons-toolbar></ons-toolbar>
</ons-page>
</ons-navigator>
■search.html
<ons-page ng-controller="ctrl_search.html">
<ons-toolbar>...</ons-toolbar>
<ul class="cs-ulh"></ul>
</ons-page>
当該関連個所だけ抜き出すとこんな感じです。
index.htmlで記述されているスライディングメニューでは、
main-pageとしてhome.htmlを指定。
home.htmlの中で、ons-navigatorのvar=myNavigatorを設定。
search.htmlの中でul要素にclass指定しています。
そしてindex.htmlの中ではAjax通信の後にli要素を動的生成して、
その動的li要素がクリックされたときにpushPageを実行しています。
これでも動作しないのですが何が問題なのでしょうか?
何卒ご教授お願い致します。