각도 클릭로드 컨트롤러

Question

각도 연습을 시도하고 있는데이 문제가 있습니다.

어떻게NG 클릭 부하 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>