Javascript onsen ui ons后退按钮不工作_Javascript_Html_Cordova_Back Button_Onsen Ui

Javascript onsen ui ons后退按钮不工作

javascript html cordova

Javascript onsen ui ons后退按钮不工作,javascript,html,cordova,back-button,onsen-ui,Javascript,Html,Cordova,Back Button,Onsen Ui,我正在使用Phongap和Cordova的移动应用程序我有一个带有ons列表的index.html页面，在每个项目中，我都会被重定向到另一个页面我的做法如下： <list-item-ons modifier = "chevron" ng-click = "myNavigator.pushPage ('NewPage.html', {animation: 'slide'})"> 在新页面中，我有一个ons工具栏，其中的ons后退按钮不起作用。我想使用popPage（）返回In

我正在使用Phongap和Cordova的移动应用程序

我有一个带有ons列表的index.html页面，在每个项目中，我都会被重定向到另一个页面

我的做法如下：

<list-item-ons modifier = "chevron" ng-click = "myNavigator.pushPage ('NewPage.html', {animation: 'slide'})">

在新页面中，我有一个ons工具栏，其中的ons后退按钮不起作用。我想使用popPage（）返回Index.html

谁能帮我一下吗

这是我的代码：

Index.html：

  <!doctype html>
  <html lang="en" ng-app="app">
  <head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>My App</title>  

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="styles/app.css"/>
  <link rel="stylesheet" href="styles/onsen-css-components.min.css">  

  <script type="text/javascript" src="cordova.js"></script>
  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    
  <script src="js/jquery-1.11.2.min.js"></script>  

   <script src="js/app.js"></script>  

  </head>

 <body ng-controller="AppController">

     <ons-navigator title="Navigator" var="myNavigator">
         <ons-sliding-menu main-page="page1.html"
                           menu-page="menu.html"
                           side="left"
                           max-slide-distance="250px"
                           var="menu"
                           type="overlay">
         </ons-sliding-menu>

         <ons-template id="page1.html">
             <ons-page>
                 <ons-toolbar>
                     <div class="left">
                         <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
                     </div>
                     <div class="center">MyAppName</div>
                 </ons-toolbar>
                 <div style="width:100%;height:70%">
                     <ons-list>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 1</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 2</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 3</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 4</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('NewPage.html', { animation : 'slide' })">
                             <div style=" text-align:center">Item 5</div>
                         </ons-list-item>
                     </ons-list>
                 </div>
             </ons-page>
         </ons-template>
         <ons-template id="menu.html">
             <ons-list>
                 <ons-list-item modifier="tappable" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
                     <ons-icon icon="fa-home" size="20px" style="color: #661f7a"></ons-icon>
                     Home
                 </ons-list-item>
                 <ons-list-item modifier="tappable">
                     <ons-icon icon="fa-question" size="20px" style="color: #661f7a"></ons-icon>
                     Help
                 </ons-list-item>
                 <ons-list-item modifier="tappable">
                     <ons-icon icon="fa-info-circle" size="20px" style="color: #661f7a"></ons-icon>
                     About My App
                 </ons-list-item>
             </ons-list>
         </ons-template>

     </ons-navigator>



</body>
</html>


我的应用程序
MyAppName
项目1
项目2
项目3
项目4
项目5
家
帮助
关于我的应用程序

NewPage.html（包含不起作用的后退按钮）：


返回
我的新页面

ons导航器的声明是错误的，您应该将导航器放在主页上。结构应类似于：


…内容。。。

$scope.goBack=function（）{window.history.back（）；}

，然后在

ng单击中调用goBack？而且NewPage.html保持静态，我无法切换，也无法在输入中输入文本。导航是正确的吗？@ KMMAURI我看到你标记了我的答案，请考虑也投票赞成它给它更多的可见性在未来。
<ons-page>
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">My New Page</div>
    </ons-toolbar>

    <div>
        <div>
            <input class="text-input" id="my-input" placeholder="Enter some Text...">
        </div>
       <div>
           <ons-switch var="mySwitch1"></ons-switch>
       </div>
        <div>
            <select id="select1"></select>
        </div>
        <div>
            <ons-switch var="mySwitch2"></ons-switch>

        </div>
        <div>
            <select id="select2"></select>
        </div>

    </div>
</ons-page>

<div class="left" onclick="fn.load('home.html')" tappable><ons-back-button>Back</ons-back-button></div>

window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page).then(menu.close.bind(menu));
};