State.go () shows the url in the address page but does not update the html view
I have a problem when working with Ionic with angularJs, the problem is in the routing system when I try to create a login page. In the controller part of the code, I'm trying to load the calle 'dash' welcome page withstate.go(psc.dash)
here is my controller.js :
angular.module('starter.controllers', [])
.controller('LoginCtrl', function($location, $state) {
var user = this;
user.login = function() {
console.log("LOGIN user: " + user.email + " - PW: " + user.password);
setTimeout(function() {
state.go('psc.dash');
}, 20);
};
})
.controller('DashCtrl', function($scope, $location) {});
here is my App.js:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('login', {
url: "/login",
views: {
'login': {
templateUrl: "templates/login.html",
controller: "LoginCtrl"
}
}
})
.state('psc', {
url: "/psc",
abstract: true,
templateUrl: "templates/psc.html"
})
.state('psc.dash', {
url: "/dash",
views: {
'psc-dash': {
templateUrl: "templates/dash.html",
controller: "DashCtrl"
}
}
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
and here is my login.html
<div class="list list col span_1_of_2 " ng-controller="LoginCtrl as loginCtrl">
<label class="item item-input">
<span class="input-label">E-mail</span>
<input type="text" ng-model="loginCtrl.email">
</label>
<label class="item item-input">
<span class="input-label">password</span>
<input type="password" ng-model="loginCtrl.password">
</label>
<div>
<div class="col span_2_of_3"><a href=" ">forgot password ? </a></div>
<button class="button button-positive col span_1_of_3" ng-click="loginCtrl.login()">
connect
</button>
</div>
</div>
The problem is when I click the connect button url '/ psc / dash' appears in the address bar, but the viewport remains rendered and the page is not reloaded with the new html view.
source to share
EDIT
It is not right. There ui-router
is a discrepancy in the documentation : indicates that inheritance from abstract state is prefixed with their parent url .
The reason is that although your nested state is 'psc.dash'
defined as a child of the state 'psc'
, the URL assigned to it is not automatically prefixed with its parent URL.
You want to change the definition of the state 'psc.dash'
like this:
.state('psc.dash', {
url: "/psc/dash",
views: {
'psc-dash': {
templateUrl: "templates/dash.html",
controller: "DashCtrl"
}
}
})
Take a look at the ui-router documentation why this is:
What do children inherit from parental states?
DO child states inherit the following from parent states:
Nothing else is inherited (no controllers, templates, urls, etc.).
source to share
Service $state
, so the code should be:
$state.go('psc.dash');
You can get rid of the controller definition in your HTML:
<div class="list list col span_1_of_2" ng-controller="LoginCtrl as loginCtrl">
</div>
use this instead:
<div class="list list col span_1_of_2">
</div>
and change the state like this:
.state('login', {
url: "/login",
views: {
'login': {
templateUrl: "templates/login.html",
controller: "LoginCtrl as loginCtrl"
}
}
})
You don't need to specify the controller twice.
Your login.html template doesn't use <ion-view>
. It would be interesting to see the plunker of your project.
Another thing I'm not sure about is state definition. Unless the view login is wrapped in another container, you should write it like this:
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl as loginCtrl"
})
source to share