$state.go don't work


#1

Hi I’m new with ionic.

I use the side menu base template and I want to modify it with a login page that refer to the side menu.

in the default controller.js file I have added $state in the controller parameter and added a function for change the state when call doLogin():

.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {
// change state and show the menu
$scope.home = function() {
  $state.go('app.menu');
  console.log('state, $state.current);
}

// Perform the login action when the user submits the login form
$scope.doLogin = function() {
       console.log('Doing login', $scope.loginData);

// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
  $scope.closeLogin();
  
}, 1000);

$scope.home

};

In the app.js file I modify the abstract state from menu.html to login.html and add the menu state:

.config(function($stateProvider, $urlRouterProvider) { $stateProvider
 .state('app', {
     url: "/app",
    abstract: true,
    templateUrl: "templates/login.html",
    controller: 'AppCtrl'
  })

 .state('app.menu', {
  url: "/menu",
  templateUrl: "templates/menu.html"
 })
menu.html and login templates are the default file from sidemenu tamplate.

Now, I display the login how first page but when click the login button the state don’t change. the page is still the same and in the console there aren’t error.
which probably is the error that I commit?

thanks

Sorry for my english


#2

let me see if I understood your question.
You want the side menu to contain the login screen and the side menu content to contain your app content ?


#4

Unless you did not paste your real code, your code snippet has 2 errors:

Missing closing quote:

console.log('state, $state.current);

And $scope.home should be $scope.home()

May I suggest that you use codepen for your code examples?


#5

I found a solution for my problem.

I wanted a login page that when I clicked on the “log-in” button then opened a side bar menu page.

I resolve this studying the state transition in angularJs.

in the app.js file, I define a state for the login page an abstrac state for the menu and a state for the home page inside the side bar menu.

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

$stateProvider
.state(‘app’, {
url: “/app”,
templateUrl: “templates/login.html”,
controller: ‘LoginCtrl’
})

.state(‘menu’, {
url: “/menu”,
abstract: true,
templateUrl: “templates/menu.html”,
controller: ‘MenuCtrl’
})

.state(‘menu.home’, {
url: “/home”,
views: {
‘menuContent’: {
templateUrl: “templates/home.html”
}
}
})

$urlRouterProvider.otherwise(’/app’);
});

in the login.html page I add a controller named LoginCtrl and when click on the log-in button call the method doLogin()
In the controller.js fileI entered the transiction

.controller(‘LoginCtrl’, function($scope, $state, $timeout){
$scope.doLogin = function(){

$state.go('menu.home');
console.log('home');
}

})

thank’s of all