Question

我试图练习棱角分明，我就是这样做了。

如何 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

您不需要额外的控制器。我想你想显示关于点击书的额外信息。

使用引用和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>

Answer 2

为什么要调用单独的控制器，无法在下面的单独函数中实现该功能，

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>

Angular ng-click加载控制器

2 个答案: