Having trouble trying to get my app to switch to another page on a click in my controller. If anyone could give me pointer on what I'm missing or doing wrong here it would really be appreciated!
here is my app.js .config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
views: {
'login': {
templateUrl : 'index.html',
controller: 'TestCrtl'
}
}
})
.state('userprofile', {
url: '/mainmenu',
templateUrl: 'views/main-menu/main-menu.html'
})
$urlRouterProvider.otherwise('/');
})
.controller('TestCtrl',function($scope, $location) {
$scope.testMove = function($scope, $location) {
console.log("Button was pressed!");
$location.transitionTo('/mainmenu');
}
});
and here is my index.html
<body ng-app="app" animation="slide-left-right-ios7">
<ion-view style="" title="MainMenu">
<div class="bar bar-header bar-assertive">
<h1 class="title">Home</h1>
<a class="button icon-right button-clear ion-gear-a"></a>
</div>
<ion-content style="background-color: #e9efec" class="has-header" scroll="true" padding="true">
<div align="center" style="padding: 15%">
<img style="height: 60px; width: 180px" src="img/digicellogo.png">
</div>
<div style="" class="list card">
<div class="item item-body">
<form >
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/username-logo.JPG">
</a>
<input type="text" placeholder="DigicelID">
</label>
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/password-logo.JPG">
</a>
<input type="text" placeholder="Password">
</label>
<div align="right">
<button class="button button-clear button-assertive">
Forgot Password?
</button>
</div>
<a class="button button-block button-assertive" ng-click="testMove()" ng-controller="TestCtrl">
Login
</a>
<button class="button button-block button-assertive">
Sign Up
</button>
</form>
</div>
</div>
</ion-content>
</body>
EDIT:
My Updated controller in App.js: No longer gives me a "undefined error" but simply does nothing? I don't know if I fully understand how to inject $scope.
.controller('TestCtrl',['$scope', '$state', function($scope, $state) {
$scope.testMove = function() {
console.log("Button was pressed!");
$state.go('userprofile');
};
}])
Try using $state.go('userprofile');
instead of location.transitionTo('/mainmenu');
(remember to inject $state into your controller to test this)