Question

我是离子新手我正在尝试在登录应用程序中的两个视图之间进行简单的切换：

的index.html 的

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Login App</h1>
  </ion-header-bar>
  <ion-content>

            <div class="list list-inset">
                <label class="item item-input">
                  <input type="text" placeholder="Email" ng-model="data.email">
                </label>
                <label class="item item-input">
                  <input type="password" placeholder="Password" ng-model="data.password">
                </label>
            </div>
            <button class="button button-block button-calm" ng-click="postLogin()">Login</button>

  </ion-content>
</ion-pane>

logincontroller.js

app.controller（'loginCtrl'，函数（$ scope，$ http，$ location） {

$scope.data = {};
$scope.postLogin = function ()
{

    var data = 
    {
            email: $scope.data.email,
            password: $scope.data.password
    };

   console.log('bonjour');
    $http.post("http://localhost/authproject/public/api/auth/login", data)
    .then(
       function(response){
         // success callback
        console.log('success');
         $location.path('/map');


       }, 
       function(response){
         // failure callback

         console.log('error');
  $location.path('/index');

       }
    );



}

当我点击按钮时，登录网址会发生变化但页面不会改变

有人能告诉我如何解决这个问题？在此先感谢：）

Answer 1

在app.js中添加map这样的状态（包含您自己的templateUrl和controller值）。请务必在$stateProvider中添加config()。另外，请在您的依赖项中包含ui.router。像这样：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider){

    $stateProvider
       .state('map', {
        url: '/map',
        templateUrl: 'app/views/map.html',
        controller: 'MapController'
     });
...

在您的index.html：

中

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

Answer 2

试试这个

app.controller('loginCtrl', function ($scope,$http,$location,$state) {

$scope.data = {};
$scope.postLogin = function ()
{

    var data = 
    {
            email: $scope.data.email,
            password: $scope.data.password
    };

   console.log('bonjour');
    $http.post("http://localhost/authproject/public/api/auth/login", data)
    .then(
       function(response){
         // success callback
        console.log('success');
         $location.path('/map');


       }, 
       function(response){
         // failure callback

         console.log('error');
      $state.go('main');

       });
})

在app.js

中添加状态

.config(function($stateProvider,$urlRouterProvider){
      .state('main', {
       url:'/main',
       templateUrl:'templates/main.html',
       controller:'yourCtrl'
     })

 $urlRouterProvider.otherwise('/index');
})

现在在模板文件夹中创建一个名为main.html

的页面

AngularJS更改位置无效

2 个答案: