Question

我的代码工作正常。但是当我点击登录按钮时，它会改变状态，如图中所示，它正在更改其网址但不能打开该页面。任何帮助我如何重定向到下一页？

的index.html

<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>

的login.html

<ion-view view-title="login">
  <ion-header-bar>
    <h1 class="title">Login</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="doLogin()">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="loginData.username">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Log in</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-view>

app.js

angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    templateUrl: 'templates/login.html',
    controller: 'AppCtrl'
  })

   .state('app.menu', {
    url: '/home',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
  .state('app.search', {
     url: '/search',
     views: {
    '   menuContent': {
           templateUrl: 'templates/search.html'
        }
     }
  })
});

Controllers.js

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);
    $state.go('app.search');

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

Answer 1

您使搜索状态成为应用状态的子状态（显示您的登录信息）。

因此它将首先显示带有登录的模板，并且此模板不包含任何可帮助显示其他状态的内容。

我想你希望你的州是：使用url / login登录应用程序与网址/应用程序和摘要然后使用url / search进行app.search。

然后在您的网址栏中，您会看到/ app / search，它将是您正在寻找的正确的网址和正确的状态。

使用角度从离线登录页面移动到主页面

1 个答案: