Question

我花了4到6个小时试图解决我的问题 - 也许我完全看错了。

controller.js档案：

'use strict';

/* Controllers */

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

bookControllers.controller('BookListCtrl', ['$scope', 'Book',
  function($scope, Book) {
    $scope.books = Book.query();
    $scope.orderProp = 'name';
  }]);

bookControllers.controller('BookDetailCtrl', ['$scope', '$routeParams', 'Book',
  function($scope, $routeParams, Book) {
    $scope.book = Book.get({bookId: $routeParams.bookId}, function(book) {
      $scope.mainImageUrl = book.avatar;
    });

    $scope.setImage = function(imageUrl) {
      $scope.mainImageUrl = imageUrl;
    };
  }]);

我的service.js文件

'use strict';

/* Services */

var bookServices = angular.module('bookServices', ['ngResource']);

bookServices.factory('Book', ['$resource',
  function($resource){
    return $resource('https://api.myjson.com/bins/1oofv', {}, {
      query: {method:'GET', params:{bookId:'bookId'}, isArray:true}
    });
  }]);

所以发生了什么。

我的SHOW文件 - 显示我在myjson上托管的books文件中的所有book.json，显示了我需要的所有内容。

使用以下html显示所有缩略图：

<div class="container">
<!--Nav Bar-->
  <div class="row">
    <div class="col-md-4">
      Find me the best
      <select ng-model="orderProp" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>
    </div>

    <div class="col-md-4">
      Books about
      <select ng-model="orderProp" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        <option ng-repeat="book in books" value="">{{ book.genre.name }}</option>
      </select>
    </div>

    <div class="col-md-4">
      <div class="input-group">
        <input ng-model="query" type="text" class="form-control" placeholder="Search books">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" ></span></button>
          </span>
      </div>
    </div>
  </div>

<!--Body content-->
  <div class="row">
    <div class="col-md-4" ng-repeat="book in books | filter:query | orderBy:orderProp">
      <div class="thumbnail" id="books">
        <a href="#/books/{{ book.name }}"><img ng-src="{{ book.cover }}"></a>
        <div class="caption">
          <h4>{{ book.name }}</h4>
          <h5><a href="{{ book.id }}">{{ book.author.name }}</a></h5>
          <span class="glyphicon glyphicon-heart likes">{{ book.likes }}</span>
          <span style="float: right;">{{ book.published | date:'yyyy-MM-dd' }}</span>
        </div>
      </div>
    </div>
  </div>
</div>

这一切都很好 - 现在当我点击一个特定的书或作者时，我期待该应用程序导航到下一页，详细说明我在以下模板中需要的所有细节（但它没有）：

<div class="container">
<div class="row">
  <header>
    <h1></h1>
    <h4></h4>
    <p></p>
    <h6>Categories:</h6>
    <span>{{ book.genre.category }}</span>
  </header>
</div>

<div class="row">
  <h3>Introduction</h3>
  <h1></h1>
  <p></p>
  <div class="line-sep"></div>
  <img ng-src="{{ avatar }}" class="img-round" />
  <h2></h2>
</div>

<div class="row">
  <h1>Similar reading</h1>
  <p></p>
  <div class="col-md-4">
    <div class="thumbnail" id="books">
      <a href="#"><img ng-src="http://placehold.it/350x500"></a>
      <div class="caption">
        <h4>Lorem Ipsum Dolar Asar</h4>
        <h5><a href="#">By Mr Lorem Ipsum</a></h5>
        <span class="glyphicon glyphicon-heart likes">1032</span>
        <span style="float: right;">3 days ago</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail" id="books">
      <a href="#"><img ng-src="http://placehold.it/350x500"></a>
      <div class="caption">
        <h4>Lorem Ipsum Dolar Asar</h4>
        <h5><a href="#">By Mr Lorem Ipsum</a></h5>
        <span class="glyphicon glyphicon-heart likes">1032</span>
        <span style="float: right;">3 days ago</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail" id="books">
      <a href="#"><img ng-src="http://placehold.it/350x500"></a>
      <div class="caption">
        <h4>Lorem Ipsum Dolar Asar</h4>
        <h5><a href="#">By Mr Lorem Ipsum</a></h5>
        <span class="glyphicon glyphicon-heart likes">1032</span>
        <span style="float: right;">3 days ago</span>
      </div>
    </div>
  </div>
</div>
</div>

查看我网站上的josn文件：https://api.myjson.com/bins/1oofv

我需要做的就是：

使用json文件在list页面上显示书籍（包含一些详细信息） - 以我认为合适的任何显示样式。

然后 - 一旦显示所有图书（具有搜索和过滤功能） - 能够点击一本书并转到BOOK DETAIL页面，我们将深入了解该书并展示图书与他们相似。

Answer 1

停止压力，并按照Flatlander Gemstore tutorial。

我可以发现的第一个问题是，您使用Book.get但定义了Book.query
其次，使用href="#"打破角度，要么使用<a href="">，要么根据我的喜好，只使用一个按钮，一个无处不在的超链接不是一个链接。
正如yeouuu所说，href="{{ book.id }}"似乎是错误的，这可能是一个语义错误，应该是href="{{ book.url }}"，或者这只是一个错误，应该完全是另一回事。

做本教程，它是一个很好的资源。

服务（工厂）错误 - json api无法显示数据

1 个答案: