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;，然后重试。

AngularJS按钮指令不起作用

2 个答案: