I'm using ui-router for creating some routes and I'm getting this very weird thing happening.
I have this route config
.state('chapter_route', {
url: '/book/:chap',
templateUrl: "views/chapter.html",
params: { chap: null}
})
So when I clink on:
<a ui-sref="chapter_route({ chap: getChapter.title})">CHAPTER:</a>
It redirects me, as I wanted, to this following ui-view:
<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>
As you can see I have another <a>
tag here that is supposed to send me to a different chapter and also changes the value of chapter
getChapter looks something like:
$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];
and changeChapter looks like this:
$scope.changeChapter = function(chap){
$scope.getChapter = chap;
console.log($scope.getChapter);
};
So here's what's really happening:
I start by showing the first chapter and create links for all the next chapters. If I click on the <a>
tag it changes the value of getChapter using ng-click and prints it on the console perfectly fine but it doesn't change the ui-view for this chapter unless I click it again. I can see the ui-view change for a fraction of a second but it doesn't stay, it quickly loads the ui-view for the first chapter. But if I click again, it shows the chapter I'm clicking on. So, I need to click twice for it to change which is very weird.
However if I decide to click on the button "PRESS ME" it changes directly into the next chapter in the ui-view.
I want to be able to click on the <a>
tag and change to a different ui-view and at the same time having a different url, according to the chapter title.
Any ideas of what might be causing this weird error?
Thank you :)
EDIT:
https://plnkr.co/edit/D6f9Q3fhL294DukEZFOz?p=preview
I added a simple plunker with the issue we're discussing so you can have a better view of what I'm talking about.
The issue is with your controller code $scope.getChapter = $scope.allChapters[0];
here for all case you are hard coding current chapter with first chapter, so in all case it will render the same only.
Replace it with if (!$stateParams.chap) {
$scope.selectedChapter = $scope.allChapters[0];
}
. It will solve your issue. Updated Plunker with Fix