Ramesh Bista Ramesh Bista - 3 months ago 31
AngularJS Question

Ionic button ng-click

I do have a different button on my first page.I just want to move to respective page on clicking to each button.However this is not working.I am new to ionic. Plz help.

Here is my controller.js

`angular.module('starter.controllers', [])

.controller('TutorialsCtrl', function($scope) {})


.controller('AndroidCtrl', function($scope,$state) {
$scope.create = function () {
$state.go('templates/android');
};
});`


This is my app.js

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

$stateProvider

.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})

// Each tab has its own nav history stack:

.state('tab.tutorials', {
url: '/tutorials',
views: {
'tab-tutorials': {
templateUrl: 'templates/tutorials.html',
controller: 'TutorialsCtrl'
}
}
})
.state('tab.android',{
url:'/tutorials/:tutorialId',
views:{
'tab-tutorials':{
templateUrl:'templates/android.html',
controller:'AndroidCtrl'
}

}
})

});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/tutorials');

});


here is my tutorials.html page

<ion-view view-title="Tutorials">
<ion-content class="padding">
<div class="background">
<button class="button button-outline button-positive myandroid" ng-click="create()">
<i class="icon ion-social-android home"></i>
<p>Android</p>
</button>
</div>
</ion-content>
</ion-view>


I want to navigate from tutorials.html to android.html.I do have a blank android.html page at this instant

Answer

Instead of button use a(anchor) as you wanted to change the state(route) of your application. And on each anchor you could use ui-sref directive with respective stateName, so that will create create a required href tag over there.

Markup

<ion-view view-title="Tutorials">
  <ion-content class="padding">
    <div class="background">
      <a class="button button-outline button-positive myandroid" ui-sref="tab.tutorials">
        <i class="icon ion-social-android home"></i>
        <p>Android</p>
      </button>
    </div>
  </ion-content>
</ion-view>