Question

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

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

CoffeeScript方法的filterSkills()如下：

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

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

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

])

EDITED：在我的服务器端日志中，我可以看到： 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);

Answer 1

我建了一个Fiddle。 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>

Angular服务不适用于REST API

1 个答案: