AngularJS - ui-routage avec ng-clic ne fonctionne pas correctement

Question

J'utilise ui-router pour créer des routes et je suis en train de réaliser cette chose très étrange.

J'ai cette route config

.state('chapter_route', { 
    url: '/book/:chap', 
    templateUrl: "views/chapter.html", 
    params: { chap: null} 
}) 

Alors, quand je Clink sur:

<a ui-sref="chapter_route({ chap: getChapter.title})">CHAPTER:</a> 

Il me réoriente, comme je le voulais, ce ui-vue suivant:

<div class="panel panel-default"> 
         <div class="panel-body"> 
          <p>{{getChapter.title}}</p> 
          {{getChapter.content}} 
         </div> 
    </div> 
...... 
...... 
     <div class="panel panel-default" data-ng-repeat="cha in allChapters"> 
      <div class="panel-body"> 
       <a ui-sref="chapter_route({ chap: cha.title})" ng-click="changeChapter(chap)">{{cha.title}}</a> {{cha.content | limitTo: 100}}. 
       <button ng-click="changeChapter(article)">PRESS ME </button> 
      </div> 
     </div> 

Comme vous pouvez le voir, j'ai un autre tag <a> ici qui est censé m'envoyer à un autre chapitre et un LSO modifie la valeur du chapitre

getChapter ressemble à quelque chose comme:

$scope.allChapters = [ 
    { 
     title: "title 1", 
     chapter: "the whole chapter goes here" 
    }, 
    { 
     title: "title 2", 
     chapter: "the whole chapter 2 goes here" 
    }, 
    { 
     title: "title 3", 
     chapter: "the whole chapter 3 goes here" 
    } 
    ]; 

$scope.getChapter = $scope.allChapters[0]; 

et changeChapter ressemble à ceci:

$scope.changeChapter = function(chap){ 
    $scope.getChapter = chap; 
    console.log($scope.getChapter); 
}; 

Alors, voici ce qui se passe réellement: Je commence par montrer le premier chapitre et créer des liens pour tous les chapitres suivants. Si je clique sur la balise <a>, elle change la valeur de getChapter en utilisant ng-click et l'imprime parfaitement sur la console mais ne change pas l'ui-view de ce chapitre à moins que je ne clique dessus à nouveau. Je peux voir le ui-view changer pendant une fraction de seconde mais il ne reste pas, il charge rapidement l'ui-view pour le premier chapitre. Mais si je clique à nouveau, cela montre le chapitre sur lequel je clique. Donc, j'ai besoin de cliquer deux fois pour que ça change, ce qui est très bizarre. Cependant, si je décide de cliquer sur le bouton "PRESSE MOI", je passe directement au chapitre suivant de l'ui-view. Je veux être capable de cliquer sur la balise <a> et de passer à une autre ui-view tout en ayant une URL différente, selon le titre du chapitre.

Des idées de ce qui pourrait causer cette erreur bizarre?

Merci :)

EDIT:

https://plnkr.co/edit/D6f9Q3fhL294DukEZFOz?p=preview

J'ai ajouté un simple, plunker la question dont nous discutons donc vous pouvez avoir une meilleure vue de ce dont je parle.

Answer 1

Le problème est avec le code de votre contrôleur $scope.getChapter = $scope.allChapters[0]; ici dans tous les cas, vous êtes en train de coder en dur le chapitre actuel avec le premier chapitre, donc dans tous les cas, il rendra le même uniquement. Remplacez-le par if (!$stateParams.chap) { $scope.selectedChapter = $scope.allChapters[0]; }. Cela va résoudre votre problème. Updated Plunker with Fix

Answer 2

Check this plunker for your working example

vous devez utiliser $state.go pour cela.

$scope.changeChapter = function(chap){ 
    $scope.getChapter = chap; 
    $state.go('chapter_route', {chap: chap}); 
    console.log($scope.getChapter); 
}; 

REMARQUE: ne pas oublié d'ajouter $state dans le contrôleur.