Question

我在使用angularJs进行Ionic时遇到问题，当我尝试开发登录页面时问题出现在路由系统中。在代码的控制器部分，我试图加载一个欢迎页面calle'dash'与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>

问题是，当我点击连接按钮时，地址栏中会显示网址“/ psc / dash”，但会显示登录视图，并且不会使用新的html视图重新加载页面。 < / p>

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原因：


儿童国家从父母国家继承什么？

子状态DO从父状态继承以下内容：



Resolved dependencies via resolve Custom data properties



Custom data properties



没有其他任何东西被继承（没有控制器，模板，网址等）。

Answer 2

该服务为$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>。看到你的项目的一个东西会很有趣。

我不确定的另一件事是州定义。如果视图登录未包装在另一个容器中，则应按如下方式编写：

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

Answer 3

解：我的psc路线应该被命名为'login'以便识别

$('#effectiveDate').first().val();

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

3 个答案: