Hard time with chapters.html

Get Help Angular.js
#1

Hey there, could someone help me with this task? I’m not sure how to write / nest all these controllers. Currently I am displaying the book title, author, chapter title, paragraphs and when clicking next the URL changes the chapterId.
However, the view does not change.

Here’s my code…
chapter.html

<a class="button back" href="#/books/{{ currentBook }}">Back</a>
<div class="chapter" ng-repeat="chapter in book.chapters">
  <p><span class="title"> {{book.title}} </span> <span class="author"> {{book.author}} </span></p>
  <h2 class="chapter-title"> {{chapter.title}} </h2>

  <p ng-repeat="paragraph in chapter.paragraphs">{{ paragraph }}</p>
  
  <a class="button next" href="#/books/{{ currentBookIndex }}/chapters/{{ nextChapterIndex }}">Next</a>
</div>

ChapterController.js scope

    $scope.book = data[$routeParams.bookId];
      $scope.book(function() {
        $scope.chapter = data[$routeParams.chapterId];
    });
#2

I think you just need to access chapter from $scope.book with .notation, and no need a function here.

$scope.book = data[$routeParams.bookId];
$scope.chapter = $scope.book.chapters[$routeParams.chapterId];
2 Likes
#3

Might be solved by now, but I had the same problem and sorted it through changing what byemusic mentioned but then also getting rid of the ng-repeat seen here -

<div class="chapter" ng-repeat="chapter in book.chapters">

That will get the links working so that you can scroll through chapters.
Hope that helps!

2 Likes
#4

I took the ChapterController.js scope code you provided, used in my working code and the Chrome console showed me this error:

TypeError: $scope.book is not a function angular.min.js:102.

This led me to believe something was wrong with the following snippet since it mentions $scope.book and the use of a function:

$scope.book(function() { $scope.chapter = data[$routeParams.chapterId]; });

Here is the solution.

Incorrect:

$scope.book(function() { $scope.chapter = data[$routeParams.chapterId]; });

Correct:

$scope.chapter=$scope.book.chapters[$routeParams.chapterId];