Angular ng-click load controller

Question

I'm trying to practice angular and I'm stuck this this.

How do I make ng-click load the displayController? Or am I doing this wrong way?

The Angular

var bible = angular.module('bible', []);

// Load the Books
bible.controller('listController', ['$scope', '$http', function($scope, $http) {

    $http.get('books.json').success(function(data) {
        $scope.books = data
    });

}]);

bible.controller('displayController', function($scope) {
    $scope.test = "TEST TEXT";
});

The HTML

<div class="row">
        <div class="col-md-12" ng-controller="listController">
            <table class="table">
                <thead>
                    <th>Testament</th>
                    <th>Title</th>
                    <th>Chapters</th>
                </thead>
                <tbody>
                    <tr ng-repeat="book in books">
                        <td>{{book.testament}}</td>
                        <td><a href="#" ng-click="displayController">{{book.title}}</a></td>
                        <td>{{book.chapters}}</td>
                    </tr>
                </tbody>
            </table>

            <div class="display-book" ng-controller="displayController">
                {{test}}
            </div>
        </div>
    </div>

I guess this isn't the way you are supposed to do it. Whatever is inside the ngClick, should be inside the $scope of the main controller, in your case, listController. What are you trying to achieve with this? — Re Captcha
– Re Captcha, Commented Sep 1, 2014 at 8:56

Konstantin Krass · Accepted Answer · 2014-09-01 09:17:41Z

You don't need the additional controller there. I guess you want to display additional infos about the clicked book.

Use a reference and ngIf

var bible = angular.module('bible', []);

// Load the Books
bible.controller('listController', ['$scope', '$http', function($scope, $http) {
    $scope.selectedBook = null;
    $http.get('books.json').success(function(data) {
        $scope.books = data
    });
}]);

And html:

<div class="row">
    <div class="col-md-12" ng-controller="listController">
         <!-- will be shown, as long as not book is selected -->
        <table data-ng-if="selectedBook == null" class="table">
            <thead>
                <th>Testament</th>
                <th>Title</th>
                <th>Chapters</th>
            </thead>
            <tbody>
                <tr ng-repeat="book in books">
                    <td>{{book.testament}}</td>
                    <td><a href="#" ng-click="selectedBook = book;">{{book.title}}</a></td>
                    <td>{{book.chapters}}</td>
                </tr>
            </tbody>
        </table>
         <!-- will be shown, when a book got selected -->
        <div data-ng-if="selectedBook != null" class="display-book">
           <!-- display the selection table again -->
            <button data-ng-click="selectedBook = null">Back</button>

            {{selectedBook.title}}
        </div>
    </div>
</div>

Clément Malet · Accepted Answer · 2014-09-01 09:49:51Z

1

Why do you want to call a separate controller cant you implement the functionality in a separate function like below ,

bible.controller('listController', ['$scope', '$http', function($scope, $http) {

    $http.get('books.json').success(function(data) {
        $scope.books = data
    });

    $scope.display = function(){
         // **YOUR CODE COMES HERE**
    }
}]);

 <td><a href="#" ng-click="display()">{{book.title}}</a></td>

edited Sep 1, 2014 at 9:49

Clément Malet

5,0903 gold badges32 silver badges48 bronze badges

answered Sep 1, 2014 at 9:04

Janaki Sathiyamurthy

5881 gold badge6 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular ng-click load controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related