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

因爲你的代碼的大部分看起來不錯，我猜你做錯了什麼是

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

正如文件稱，響應對象包含

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.books = response.data;和$scope.book = response;和$scope.book = response.data;然後再試一次。