javascript - Angular ng-click 负载 Controller

Question

我正在尝试练习 Angular ，但我陷入了困境。

如何让ng-click加载displayController？或者我这样做是错误的？

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

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>

Answer 1

您不需要额外的 Controller 。我猜您想显示有关单击的图书的附加信息。

使用引用和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
    });
}]);

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