State.go（）显示地址页面中的url但不刷新html视图

Question

I have a problem when whorking on Ionic with angularJs, the problem is in routing system when I try to develop a login page . In the controller part of code i'l trying to load a welcome page calle 'dash' with state.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 on connect button the url '/psc/dash' appears in address bar but the login view stay displayed and the page is not reloaded with the new html view.

Answer 1

EDIT

This is wrong. There is a discrepancy in the ui-router documentation: states that inherit from an abstract state are prefixed with their parents URL .

---

The reason is that although your 'psc.dash' nested state is defined as a child of the 'psc' state, the URL you have assigned to it is not automatically prefixed with its parent's URL.

You want to change the 'psc.dash' state definition to this:

.state('psc.dash', {
    url: "/psc/dash",
    views: {
      'psc-dash': {
        templateUrl: "templates/dash.html",
        controller: "DashCtrl"
      }
    }
  })

Take a look at the ui-router documentation for why this is:

What Do Child States Inherit From Parent States?

Child states DO inherit the following from parent states:

• Resolved dependencies via resolve Custom data properties

• Custom data properties

Nothing else is inherited (no controllers, templates, url, etc).

Answer 2

The service is $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 this way:

.state('login', {
    url: "/login",
    views: {
      'login': {
        templateUrl: "templates/login.html",
        controller: "LoginCtrl as loginCtrl"
      }
    }
  })

You don't need to define the controller twice.

Your login.html template does not use <ion-view> . It would be interesting to see a plunker of your project.

Another things I am not sure about is the state definition. If the view login is not wrapped in another container you should write it like this:

.state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: "LoginCtrl as loginCtrl"
  })

Answer 3

SOLUTION: my psc route should be named 'login' to be identified

  .state('psc', {
url: "/psc",
 views: {
  'login': {
      abstract: true,
   templateUrl: "templates/psc.html"
  }
}
})