State.go()在地址页中显示url，但不刷新html视图

State.go() shows the url in address page but doesn't refresh the html view

本文关键字：url 刷新 视图 html 显示 go 地址 State      更新时间：2023-09-26

我在使用angularJs工作Ionic时遇到了一个问题，问题是在我尝试开发登录页面时路由系统。在代码的控制器部分，我将尝试加载一个名为"破折号"的欢迎页面与state.go(psc.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/破折号'出现在地址栏中，但登录视图保持显示，页面没有重新加载新的html视图。

EDIT

这是错误的。在ui-router文档中有一个差异:从抽象状态继承的状态以其父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文档，了解为什么会这样:

子状态从父状态继承了什么?

子状态继承父状态:

  • 通过解析自定义数据属性解析依赖项

  • 自定义data属性

没有继承其他任何东西(没有控制器、模板、url等)。

服务是$state，所以代码应该是:

$state.go('psc.dash');

你可以去掉HTML中的控制器定义:

<div class="list list col span_1_of_2" ng-controller="LoginCtrl as loginCtrl">
</div>

用这个代替:

<div class="list list col span_1_of_2">
</div>

，这样改变状态:

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

你不需要定义两次控制器。

你的login.html模板没有使用<ion-view>。看一下你的项目的概要会很有趣。

另一件我不确定的事情是状态定义。如果view login没有包装在另一个容器中，你应该这样写:

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

解决方案:我的PSC路由应该命名为"login"以进行识别

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