Search Posts

AngularJS – ui-routing with ng-click not working properly

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 and prints it on the console perfectly fine but it doesn’t change the ui-view for this chapter unless I click it again?!?!?
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 🙂

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *