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];
});
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
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
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];