Question

我在html，AngularJS和REST中编写了一个Web应用程序（其余部分由我的老师修改）。我的程序应该在openning中加载参与者。但是显示为{{participant.name}}而不是{{Jhon}}

目前问题是加载方法＆＃34;搜索＆＃34;。

错误：

＆＃34;错误：Birthday.search不是函数 $scope.updateList@localhost：9000 / birthday.js：26：1 @localhost：9000 / birthday.js：31：5 Ë@本地：9000 / node_modules /角度/ angular.min.js：36：313 铁/本。$得到

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();
[...]

});

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

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

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

2 个答案: