web-dev-qa-db-fra.com

AngularJS ng-cliquez pour aller à une autre page (avec le framework Ionic)

Idéalement, lorsque je clique sur le bouton (qui se trouve dans la barre de navigation Ionic en haut), cela devrait m'amener à une autre page. Cependant, cela ne fonctionne pas. Au clic, les boutons de la barre de navigation disparaissent tous.

Quand j'ai utilisé des codes factices, cela fonctionne; l'alerte apparaît. Mais lorsque je le remplace par le code actuel, il ne fonctionne pas.

J'ai le sentiment que quelque chose ne va pas avec les codes du contrôleur et la façon dont on fait référence à l'URL ou à la vue. Mais tester avec href et ui-sref ne donne rien non plus. Google Devt Tools (console JS) et Batarang ne montre rien non plus.

Quelqu'un pourrait-il me montrer le chemin s'il vous plaît?


code html factice

<button class="button button-icon ion-compose" ng-click="create()"></button>


code du contrôleur factice dans le fichier js

$scope.create = function() {
  alert("working");
};


Code HTML actuel (j'ai essayé les 4 versions)

<button class="button button-icon ion-compose" ng-click="create('tab.newpost')"></button>
<button class="button button-icon ion-compose" ui-sref="tab.newpost"></button>
<button class="button button-icon ion-compose" href="/tab/newpost"></button>
<button class="button button-icon ion-compose" ng-click="location.path('/tab/newpost')"></button>


Le fichier de contrôleur (les dépendances Post et Auth fonctionnent correctement). Lorsque j'essaie de placer l'URL à la fois dans .go () et function (), l'application échoue.

app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.create = function() {
      /* $location.path('/tab/newpost'); */   /* this variant doesnt work */
      $state.go("/tab/newpost"); 
    };
  });


Extraits du fichier state js

.state('tab.newpost', {
      url: '/newpost',
      views: {
        'tab-newpost':{
          templateUrl: 'templates/tab-newpost.html',
          controller: 'NewCtrl'
        }
      }
    });

$urlRouterProvider.otherwise('/auth/login');
javascripthtmlangularjsionic-framework
47
Thinkerer

Sur la base des commentaires et du fait que @Thinkerer (l'OP - affiche originale) a créé un plunker pour cette affaire, j'ai décidé d'ajouter une autre réponse avec plus de détails.

Le premier et important changement:

// instead of this
$urlRouterProvider.otherwise('/tab/post');

// we have to use this
$urlRouterProvider.otherwise('/tab/posts');

parce que la définition des états est:

.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: 'tabs.html'
})

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostsCtrl'
    }
  }
})

et nous avons besoin de leur URL concaténée '/tab' + '/posts'. C'est l'URL que nous voulons utiliser comme sinon

Le reste de l'application est vraiment proche du résultat dont nous avons besoin ...
Par exemple. nous devons toujours placer le contenu dans la même vue targetgood, mais ceux-ci ont été modifiés:

.state('tab.newpost', {
  url: '/newpost',
  views: {
    // 'tab-newpost': {
    'tab-posts': {
      templateUrl: 'tab-newpost.html',
      controller: 'NavCtrl'
    }
  }

parce que .state('tab.newpost' serait en remplaçant le .state('tab.posts' nous devons le placer dans la même ancre:

<ion-nav-view name="tab-posts"></ion-nav-view>

Enfin quelques ajustements dans les contrôleurs:

$scope.create = function() {
    $state.go('tab.newpost');
};
$scope.close = function() { 
     $state.go('tab.posts'); 
};

Comme je l'ai déjà dit dans ma réponse précédente et mes commentaires ... le $state.go() est le seul moyen correct comment utiliser ionic ou ui-router

Vérifiez que tous ici Note finale - J'ai fait en sorte de naviguer simplement entre tab.posts... tab.newpost... le reste serait similaire

36
Radim Köhler

Utiliser <a> avec href au lieu de <button> résout mon problème.

<ion-nav-buttons side="secondary">
  <a class="button icon-right ion-plus-round" href="#/app/gosomewhere"></a>
</ion-nav-buttons>
14
Yang Zhang

On pense que vous devriez changer, c'est l'appel $state.go(). Comme décrit ici:

Le paramètre passé doit être le nom de l'état

$scope.create = function() {
  // instead of this
  //$state.go("/tab/newpost"); 

  // we should use this
  $state.go("tab.newpost"); 
};

Certains citent de doc (le premier paramètre à du [$state.go(to \[, toParams\] \[, options\]):

à

Chaîne Nom d'état absolu ou chemin d'état relatif

Le nom de l'état qui sera transféré ou un chemin d'état relatif. Si le chemin commence par ^ ou. alors c'est relatif, sinon c'est absolu.

Quelques exemples:

$state.go('contact.detail') will go to the 'contact.detail' state
$state.go('^') will go to a parent state.
$state.go('^.sibling') will go to a sibling state.
$state.go('.child.grandchild') will go to a grandchild state.
8
Radim Köhler
app.controller('NavCtrl', function ($scope, $location, $state, $window, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.createVariable = function(url) {
      $window.location.href = url;
    };
    $scope.createFixed = function() {
      $window.location.href = '/tab/newpost';
    };
});

HTML

<button class="button button-icon ion-compose" ng-click="createFixed()"></button>
<button class="button button-icon ion-compose" ng-click="createVariable('/tab/newpost')"></button>
3
Giannis Paraskevopoulos

Si vous voulez simplement aller sur une autre page, vous aurez peut-être besoin d'un lien qui ressemble à un bouton avec un href:

<a href="/#/somepage.html" class="button">Back to Listings</a>

J'espère que cela t'aides.

3
Kingsley Ijomah