Angular 服务不适用于 REST API答案

【问题标题】：Angular service does not work with REST APIAngular 服务不适用于 REST API
【发布时间】：2015-08-07 05:29:51
【问题描述】：

在我的应用程序中，我有以下模板：

<div class="skills-filter-input" ng-class="{'hidden-xs': skillsFilterHidden}">
<input type="text" ng-model="skillQuery" ng-change="filterSkills()" placeholder="Filter skills" class="filter-input"/>

filterSkills()方法的CoffeeScript如下：

$scope.filterSkills = ->
    $scope.skills = SkillsService.filterByName($scope.skillQuery)
    console.log "Query: " + $scope.skillQuery
    console.log "Skills: " + $scope.skills.length

当我输入技能名称过滤结果时，我只能看到 Loading.. 语句，我注意到 $scope.skills.length 是空的，即使我输入了数据库中存在的技能，所以下面的 @987654326 有什么问题@ 或者错误可能在其他地方？

angular.module("myModule").service("SkillsService", ["$resource", ($resource)      ->
class SkillsService

constructor: ->
  @skills = angular.element("skills").data("json")
  @skills.$resolved = true
  @endPoint = $resource("/skills")

all: ->
  @skills

skillForId: (id) ->
  _.find(@all(), (skill) ->
    skill.id == id
  )

skillForIds: (ids) ->
  _.map(ids, (id) =>
    @skillForId(id)
  )

filterByName: (name) ->
  @endPoint.query(query: name).$promise

  new SkillsService()

])

编辑：在服务器端的日志中，我可以看到： Started GET "/skills?0=m&1=s&2=f&3=t" 但请求应如下所示：/skills?query=msft

编辑 2：

  (function() {
  angular.module("myModule").service("SkillsService", [
"$resource", function($resource) {
  var SkillsService;
  SkillsService = (function() {
    function SkillsService() {
      this.skills = angular.element("skills").data("json");
      this.skills.$resolved = true;
      this.endPoint = $resource("/skills");
    }

    SkillsService.prototype.all = function() {
      return this.skills;
    };

    SkillsService.prototype.skillForId = function(id) {
      return _.find(this.all(), function(skill) {
        return skill.id === id;
      });
    };

    SkillsService.prototype.skillForIds = function(ids) {
      return _.map(ids, (function(_this) {
        return function(id) {
          return _this.skillForId(id);
        };
      })(this));
    };

    SkillsService.prototype.filterByName = function(name) {
      this.endPoint.query({
        query: name
      }).$promise;
    };

    return SkillsService;

  })();
  return new SkillsService();
}
]);

}).call(this);

【问题讨论】：

能否请您发布转译后的 JavaScript？
我不是coffeescript人，但似乎@endPoint.query(query: name)被翻译成@endPoint.query(name)。
@AndyGaskell 在这里，我认为问题与我的 EDITED #1 文本有关
如果你在filterByName 中硬编码query: 'msft' 会发生什么？

标签： javascript html angularjs coffeescript

【解决方案1】：

我建立了一个Plunker。 SkillService 构造函数抛出异常；您不应该在控制器中引用 DOM，更不用说服务了。当我注释掉构造函数的前两行时，只要发出正确的 HTTP 请求，它就可以工作。

angular.module('myApp', ['ngResource']).controller('myController', function($scope, $resource, SkillsService) {
  $scope.endPoint = $resource('/skills');
  $scope.endPoint.query({query: 'msft'});
  SkillsService.filterByName('msft');
});

 (function() {
  angular.module("myApp").service("SkillsService", [
"$resource", function($resource) {
  var SkillsService;
  SkillsService = (function() {
    function SkillsService() {
      //this.skills = angular.element("skills").data("json");
      //this.skills.$resolved = true;
      this.endPoint = $resource("/skills");
    }

    SkillsService.prototype.all = function() {
      return this.skills;
    };

    SkillsService.prototype.skillForId = function(id) {
      return _.find(this.all(), function(skill) {
        return skill.id === id;
      });
    };

    SkillsService.prototype.skillForIds = function(ids) {
      return _.map(ids, (function(_this) {
        return function(id) {
          return _this.skillForId(id);
        };
      })(this));
    };

    SkillsService.prototype.filterByName = function(name) {
      this.endPoint.query({
        query: name
      }).$promise;
    };

    return SkillsService;

  })();
  return new SkillsService();
}
]);

}).call(this);

HTML：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.0-rc.2" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
    <script src="//code.angularjs.org/1.4.0-rc.2/angular-resource.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="myController">
      {{hi}}
    </div>
  </body>

</html>

【讨论】：

如何检查您的 plunker 是否正在使用我的 API 端点？因为当我在 $resource 中输入它的地址时它没有任何效果
更改后没有skills 变量，那么它应该如何工作？你测试了吗？