AngularJSを使いシングルページアプリケーションを作成しています。
厳密にいうと、OnsenUIとAngularJSを使い、JavaScriptでのスマホアプリ開発を行っています。
window.location.reload();を使うと、トップページに遷移してしまい、意図したリロードをすることができずにいます。
ページの切り替えをせずリロードする方法は他にないでしょうか?
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
onsenuiは通常ブラウザが保持している履歴(history)を使わずにページングを内部のスタックで管理しているためリロードを行うとトップページに戻ってしまいます。
独自でhistory.apiで履歴を追加するか、以下のようにページ管理をangular-ui-routerで行うことによってリロードが行われてもトップページに戻ることなく操作を続行することが可能です。
<html> <head> <meta charset="utf-8"/> <title>test</title> <link rel="stylesheet" href="onsenui.css"/> <link rel="stylesheet" href="onsen-css-components.css"/> <script src="angular.js"></script> <script src="onsenui.js"></script> <script src="angular-onsenui.js"></script> <script src="angular-ui-router.js"></script> </head> <body> <script type="text/javascript"> var app = ons.bootstrap('test', ['ui.router']); app.config(['$urlRouterProvider', '$stateProvider', ($urlRouterProvider, $stateProvider) => { $urlRouterProvider.otherwise('/page1.html'); $stateProvider.state('page1', { url: '/page1.html',onEnter: [function(){ var hasUrl = url => myNavigator.pages.reduce((result, elem) => !result ? url === elem.name : result, false); hasUrl('page1.html') ? myNavigator.popPage(): myNavigator.pushPage('page1.html', {animation: 'slide'}); }] }).state('page2', { url: '/page2.html',onEnter: [()=>myNavigator.pushPage('page2.html', {animation: 'slide'})] }); }]); </script> <ons-navigator title="Navigator" var="myNavigator"> </ons-navigator> <ons-template id="page1.html"> <ons-page> <ons-toolbar><div class="center">Page 1</div></ons-toolbar> <div style="text-align: center"> <br/><ons-button modifier="light" ui-sref="page2">→</ons-button> </div> </ons-page> </ons-template> <ons-template id="page2.html"> <ons-page> <ons-toolbar><div class="center">Page 2</div></ons-toolbar> <div style="text-align: center"> <br/><ons-button modifier="light" ui-sref="page1">←</ons-button> </div> </ons-page> </ons-template> </body> </html>
投稿2016/09/07 05:31
総合スコア376
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/08 12:34