Ionic

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

并尝试玩一下并了解 ionic 中的路由是如何工作的。当你有东西可以破解，而不仅仅是一些普通的应用程序时，开始就容易多了。

Ionic - 移动到另一个状态

Ionic - Move to another state

angularjs

angularjs-ng-click