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">
        <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>

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;

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.