错误：Birthday.search 不是函数（AngularJS）答案

【问题标题】：Error: Birthday.search is not a function (AngularJS)错误：Birthday.search 不是函数（AngularJS）
【发布时间】：2015-08-07 10:01:20
【问题描述】：

我正在用 html、AngularJS 和 REST 编写一个 Web 应用程序（其余部分已为我的老师修改）。我的程序应该在开头的选择中加载参与者。但显示即 {{participants.name}} 而不是 {{Jhon}}

问题是目前会加载方法“搜索”。

错误：

"错误：Birthday.search 不是函数 $scope.updateList@localhost:9000/birthday.js:26:1 @localhost:9000/birthday.js:31:5 e@localhost:9000/node_modules/angular/angular.min.js:36:313 Fe/this.$get

HTML：

<!DOCTYPE html>
<html lang="es" data-ng-app="birthdayApp">
<html>
<head>
    <meta charset="utf-8">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/angular/angular.min.js"></script>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <script src="birthday.js"></script>
</head>
[...]
<body>
    <div class="container-fluid" data-ng-controller="BirthdayControllers as birthday">
[...]
    <select size="2" class="col-lg-12 col-md-12 col-xs-12">
        <option data-ng-repeat="participant in participants | filter:filter"> {{participant.name}} </option>
    </select>
[...]

头还好吗？

AngularJS

'use strict';
var app = angular.module("birthdayApp", [])

app.factory('Birthday', function($http) {
    return function(errorHandler) {
        this.search = function(callback, errorHandler) {
            $http.get('/participants').success(callback).catch(errorHandler);
        }
    }
});

/* Controllers */
app.controller("BirthdayControllers", function($scope, Birthday) {
    $scope.participants = null;

    var errorHandler = function(error) {
        $scope.notificarError(error.data);
    };

    $scope.updateList = function() {
    Birthday.search(function(data) { //here stop, here the problem!
            $scope.participants = data;
        }, errorHandler);
    }

    $scope.updateList();
[...]

});

【问题讨论】：

标签： javascript html angularjs rest web-applications

【解决方案1】：

我的工厂看起来不一样了。我的做法是这样的：

app.factory('Birthday', function ($http) {    
  return {
    search: function() {
      return $http.get('/participants');
    }
  };
});

控制器看起来像这样：

Birthday.search().success(function(data) {
  $scope.participants = data;
}).error(function(data, status, headers, config)  {
  //handle the error
});

【讨论】：

【解决方案2】：

你需要从函数返回一个工厂对象，而不是另一个函数。所以像这样修改你的代码：

app.factory('Birthday', function($http) {
return {
    search: function() {
        return $http.get('/participants');
    }
};
});

最好在控制器中处理回调，所以像这样调用工厂方法：

Birthday.search().success(function(data) {
        $scope.participants = data;
    }).catch(function(error) {
        $scope.notificarError(error.data);
    });

【讨论】：