javascript - State.go() 在地址页面中显示 url 但不刷新 html View

Question

我在使用 angularJs 处理 Ionic 时遇到问题，当我尝试开发登录页面时，问题出在路由系统中。 在代码的 Controller 部分，我尝试使用 state.go(psc.dash)

加载欢迎页面 calle 'dash'

这是我的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) {});

这是我的 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');    
});

这是我的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>

问题是，当我点击连接按钮时，url“/psc/dash”出现在地址栏中，但登录 View 保持显示并且页面没有重新加载新的 html View 。

Answer 1

编辑

这是错误的。 ui-router 文档中存在差异:states that inherit from an abstract state are prefixed with their parents URL .

---

原因是虽然您的 'psc.dash' 嵌套状态被定义为 'psc' 状态的子级，但您分配给它的 URL 是不会自动以其父级的 URL 为前缀。

您想将 'psc.dash' 状态定义更改为:

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

看看 ui-router documentation这是为什么:

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).