Question

我正在开发一种离子应用程序，其中我坚持从一个州导航到另一个州。

我已经提到了我在下面尝试的方式

在 index.html 中，

<body ng-app="starter">
<ion-pane>
    <div>
    <ion-header-bar class="bar-positive">
    <h1 class="title">Registration</h1>
    </ion-header-bar> 
    <ion-content padding="true">
     <div class="list card" ng-controller="DemographicsController">

     <div   style="margin-left:15%;margin-right:15%;">
          <button class="button  icon-left ion-close-circled  button-block button-assertive" ng-click="moveToNextPage()">Move to Next Page</button>
        </div>
    </ion-content>
     </div>
    </ion-pane>
</body>

app.js

var module=angular.module('starter', ['ionic','ngCordova','ngAutocomplete'])


module.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

 $stateProvider
  .state('contactDetails', {
    url: '/contactDetails',
    views: {
      'contactDetails': {
        templateUrl: 'templates/contactDetails.html',
         controller: 'DemographicsController'
      }
    }
  });


  $urlRouterProvider.otherwise('/');

});

module.controller("DemographicsController", function($state,$scope,$cordovaSQLite) {
 $scope.moveToNextPage= function() {
       $state.go('contactDetails');
    };
});

但是，单击按钮没有任何反应。

请帮助我找到解决方案

Answer 1

首先，Ionic使用ui-router进行路由，需要

<div ui-view></div>

在index.html中

或离子情况

<ion-nav-view></ion-nav-view>

工作。

其次，我建议你写下你的路线：

$stateProvider .state('contactDetails', { url: '/contactDetails', templateUrl: 'templates/contactDetails.html', controller: 'DemographicsController' } });

由于还有一个问题要解决，最后我建议您使用

启动应用程序

ionic start yourAppName tabs

尝试播放并理解离子的路由是如何工作的。当你有什么东西可以破解时，它开始变得更容易，而不仅仅是一些简单的应用程序。

离子 - 移动到另一个状态

1 个答案: