Javascript Angular服务不适用于REST API

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

<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"/>

当我输入skill name来过滤结果时，我只能看到加载。。语句中，我注意到即使在我键入数据库中存在的skill时，

$scope.skills.length

也是空的，所以下面的

SkillService

有什么问题，或者该bug可能在其他地方

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

])

编辑： 在服务器端的日志中，我可以看到：

start 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);

我建了一个房子。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:

{{hi}}

你能发布传输的JavaScript吗？我不是coffeescript的人，但它似乎是

@endPoint.query（query:name）

被翻译成

@endPoint.query（name）

@AndyGaskell在这里，我认为问题与我编辑的#1文本有关如果在

filterByName

中硬编码

query:'msft'

，会发生什么情况？如何检查plunker是否与我的API端点一起工作？因为当我在$resource中键入它的地址时，它不会在您的更改后生效，因为没有

skills

变量，所以它应该如何工作？你测试过了吗？

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);

<!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>