AngularJSボタン指示が機能しない

Question

現在、AngularとNodeJSを使用してRESTful APIを構築しようとしています。現在、私はちょっと面倒な問題に直面しています。ユーザーをアプリケーションの詳細ページに移動させるためのボタンを作成した後、ボタンは単に応答しません。ボタンそのものがコード化されていると私は思っています。それは私が確信している指示です。

メインapp.js

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

myApp.config(function($routeProvider){ 
    $routeProvider.when('/', { 
      controller: 'BooksController', 
      templateUrl: 'views/books.html' 
    }) 
     .when('/books', { 
      controller: 'BooksController', 
      templateUrl: 'views/books.html' 
     }) 
     .when('/books/details/:id ', { 
       controller: 'BooksController', 
       templateUrl: 'views/book_details.html' 
     }) 
     .when('/books/add', { 
       controller: 'BooksController', 
       templateUrl: 'views/add_book.html' 
     }) 
     .when('/books/edit/:id ', { 
       controller: 'BooksController', 
       templateUrl: 'views/edit_book.html' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
}); 

books.html（ビュー）

<div class="panel panel-default" ng-init="getBooks()"> 
    <div class="panel-heading"> 
    <h3 class="panel-title">Latest Books</h3> 
    </div> 
    <div class="panel-body"> 
     <div class = "row"> 
      <div ng-repeat="book in books"> 
      <div class="col-md-6"> 
       <div class="col-md-6"> 
        <h4>{{book.title}}</h4> 
        <p>{{book.description}}</p> 
        <a class =" btn btn-primary" href ="#/books/details/{{book._id}}">View Details</a> 
       </div> 
       <div class="col-md-6"> 
        <img class ="thumbnail" src="{{book.image_url}}"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

books.js

var myApp = angular.module('myApp'); 
myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',function($scope, $http, $location, $routeParams){ 
    console.log('LOADED'); 
    $scope.getBooks = function(){ 
     $http.get('/api/books ').success(function(response){ 
      $scope.books = response; 
     }); 
    } 
    $scope.getBook = function(){ 
     var id = $routeParams.id; 
     $http.get('/api/books/'+id).success(function(response){ 
      $scope.book = response; 
     }); 
    } 
}]); 

私は問題はここにあるかもしれないと思う：$http.get('/api/books/'+id).success(function(response)それが何だから私は、ボタンから詳細ページにルーティングするために使用しています。

はここに私のbook_details.htmlページ

<div class="panel panel-default" ng-init="getBook()"> 
    <div class="panel-heading"> 
    <h3 class="panel-title">{{book.title}}</h3> 
    </div> 
    <div class="panel-body"> 
     <div class = "row"> 
      <div class = "col-md-4"> 
       <img src ="{{book.image_url}}"> 
      </div> 
      <div class = "col-md-8"> 
       <p>{{book.description}}</p> 
       <ul class = "list-group"> 
        <li class ="list-group-item">Genre: {{book.genre}}</li> 
        <li class ="list-group-item">Author: {{book.author}}</li> 
        <li class ="list-group-item">Publisher: {{book.publisher}}</li> 
        <li class ="list-group-item">Pages: {{book.pages}}</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    </div> 

あるプラス私は{{book.image_url}}に404を取得しています、私はなぜわかりません。これは、クリック可能ではないボタンに貢献できますか？

Answer 1

コメントに示されているように、別のコントローラを使用し、ng-initを完全に避けたいと思います。例

myApp.controller('BooksController', function($scope, $http) { 
    $http.get('/api/books').then(function(response) { 
     $scope.books = response.data; 
    }); 
}) 
.controller('BookController', function($scope, book) { 
    $scope.book = book; 
}) 

のために、あなたのルート設定で

.when('/books/details/:id', { 
    resolve: { 
     book: function($http, $route) { 
      return $http.get('/api/books/' + $route.current.params.id).then(function(response) { 
       return response.data; 
      }); 
     } 
    }, 
    controller: 'BookController', 
    templateUrl: 'views/book_details.html' 
}) 

があなたのテンプレートからng-initディレクティブを削除することを忘れないでください。

Answer 2

AngularJS $http

あなたのコードの大部分は正常に見えるので、私はあなたが間違って何をしたかと思い文書が応答オブジェクトが

data – {string|Object} – The response body transformed with the transform functions. 
status – {number} – HTTP status code of the response. 
headers – {function([headerName])} – Header getter function. 
config – {Object} – The configuration object that was used to generate the request. 
statusText – {string} – HTTP status text of the response. 

が含まれている、言ったように

$scope.books = response;と$scope.book = response;

です

変更$scope.books = response;〜$scope.books = response.data;と$scope.book = response;と$scope.book = response.data;を入力してもう一度お試しください。