Угловой контроллер загрузки ng-click

Question

Я пытаюсь попрактиковаться в угловой, и я застрял в этом.

Как сделать нг нажмите нагружают displayController? Или я делаю это неправильно?

Угловое

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>