Question

我的角度文件如下所示：

angular.module('myApp', [
  'ngResource',    
  'ngRoute',       
])

// Creating our routes
.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/professors', {
        controller : 'ProfessorListController',
        templateUrl : 'static/templates/partials/professor_list.html'
      })
      .when('/professors/:professor_id', {
        controller : 'ProfessorDetailController',
        templateUrl : 'static/templates/partials/professor_detail.html'
      })
      .otherwise({ redirectTo : '/' });
  }
])

// Getting all the professors from the API
.factory('Professor', [
  '$resource', function($resource) {
    return $resource('/api/professors/:id', {
      id: '@id'
    });
  }
])

// Creating a controller containing all the professors
.controller('ProfessorListController', [
  '$scope', 'Professor', function($scope, Professor) {
    return $scope.professor_list = Professor.query();
  }
])

// Creating a controller containing a particular professor
.controller('ProfessorDetailController', [
    '$scope', '$routeParams', 'Professor', 
    function($scope, $routeParams, Professor) {
      return $scope.professor_detail = Professor.query({
        id: $routeParams.professor_id
      });
    }
]);

教授列表视图有效且正确呈现数据。但是，当我去说

/＃/教授/ 2

它只是一个没有任何内容的空白页面。我的api似乎正在工作，因为如果我去/ api / professor / 2，它给了我id = 2作为JSON的教授的详细信息。

我的模板 professor_detail.html 如下所示：

<div>
    <div class="text-center" ng-repeat="prof in professor_detail">
        <h3>{{prof.name}}</h3>
        <p>{{prof.university}}</p>
        <p>{{prof.department}}</p>
        <p>{{prof.overall}}</p>
        <br />
    </div>
</div>

另外，如果你想知道，我可以从我的终端看到应用程序正在找到模板（Http状态200）并且还从API获取数据（GET HTTP状态200）。那么我做错了什么？

感谢任何帮助！

编辑：好的，当我去＃/ professors / 2时，我的浏览器错误控制台出现以下错误：

Error: [$resource:badcfg] http://errors.angularjs.org/1.5.0/$resource/badcfg?p0=query&p1=array&p2=object&p3=GET&p4=%2Fapi%2Fprofessors%2F2
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:6:421
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js:11:51
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:126:506
$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:47
$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:138:145
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:348
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:94:145
t@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:98:261
onload@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:99:298

知道这是什么吗？

Answer 1

您的错误日志第一行https://docs.angularjs.org/error/$resource/badcfg?p0=query&p1=array&p2=object&p3=GET&p4=%2Fapi%2Fprofessors%2F2 文档说：

当$ resource服务期望响应可以作为数组反序列化但接收对象时，会发生此错误，反之亦然。默认情况下，所有资源操作都需要对象，但需要数组的查询除外。

Answer 2

您应该使用Professor.query而不是Professor.get，因为查询函数需要将Array作为返回值。

.query在第一个请求中工作，因为您返回的是教授的列表（数组），但是一旦您只返回一个教授对象，此函数就会失败。

参考：https://stackoverflow.com/a/26093452/3156644

为什么我的Angular范围内的模板上没有数据呈现？

2 个答案: