J'ai un problème lors du travail sur Ionic avec angularJs, le problème est dans le système de routage lorsque j'essaie de développer une page de connexion. Dans la partie contrôleur du code, j'essaie de charger une page d'accueil appelée «dash» avec state.go(psc.dash)

Voici mon 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) {});

Voici mon 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');    
});

Et voici mon 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>

Le problème est que lorsque je clique sur le bouton de connexion, l'url '/ psc / dash' apparaît dans la barre d'adresse mais la vue de connexion reste affichée et la page n'est pas rechargée avec la nouvelle vue html.

3
Akram 13 juil. 2015 à 15:00

3 réponses

Meilleure réponse

SOLUTION: mon itinéraire psc doit être nommé 'login' pour être identifié

  .state('psc', {
url: "/psc",
 views: {
  'login': {
      abstract: true,
   templateUrl: "templates/psc.html"
  }
}
})
0
Akram 13 juil. 2015 à 15:40

Le service est $state donc le code doit être:

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

Vous pouvez vous débarrasser de la définition du contrôleur dans votre HTML:

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

</div>

Utilisez-le à la place:

<div class="list list col span_1_of_2">

</div>

Et changer l'état de cette façon:

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

Vous n'avez pas besoin de définir le contrôleur deux fois.

Votre modèle login.html n'utilise pas <ion-view>. Il serait intéressant de voir un plongeur de votre projet.

Une autre chose dont je ne suis pas sûr est la définition de l'État. Si la connexion de vue n'est pas encapsulée dans un autre conteneur, vous devez l'écrire comme ceci:

.state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: "LoginCtrl as loginCtrl"
  })
0
LeftyX 13 juil. 2015 à 14:22

MODIFIER

C'est faux. Il existe une différence dans la documentation ui-router: les états qui héritent d'un état abstrait sont préfixés avec l'URL de leurs parents.


La raison en est que même si votre état 'psc.dash' imbriqué est défini comme un enfant de l'état 'psc', l'URL que vous lui avez affectée n'est pas automatiquement préfixée avec l'URL de son parent.

Vous souhaitez modifier la définition d'état 'psc.dash' comme suit:

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

Jetez un œil à la documentation ui-router pourquoi c'est:

Qu'est-ce que les États enfants héritent des États parents?

Les états enfants héritent des éléments suivants des états parents:

Rien d'autre n'est hérité (pas de contrôleurs, de modèles, d'url, etc.).

0
sdgluck 13 juil. 2015 à 13:04