javascript - 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( View )

<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

正如评论中所指出的，我会使用单独的 Controller 并完全避免 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 指令。