错误:生日.search不是一个函数(AngularJS)

我正在用html、AngularJS和REST编写一个web应用程序(REST为我的老师修改)。我的程序应该加载参与者在一个选择在开幕。但是显示{{participants.name}}而不是{{Jhon}}

目前的问题是，这将加载方法"search"。

错误:

"错误:生日。搜索不是一个功能scope.updateList@localhost: 9000美元/birthday.js: 26:1@localhost: 9000/birthday.js: 31:5e@localhost: 9000/node_modules/角度/angular.min.js: 36:313Fe/获得美元

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

我的工厂看起来不一样。我是这样写的:

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

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

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

相关内容

最新更新

热门标签：