javascript TypeError: undefined 不是 Angular Resource 中的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23609162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: undefined is not a function in Angular Resource
提问by Guido Bouman
When trying to poll a custom method copieson an AngularJS Resource I get the following error at angular.js:10033: (The method copyworks just fine.)
当尝试copies在 AngularJS 资源上轮询自定义方法时，我在angular.js:10033:（该方法copy工作正常。）
TypeError: undefined is not a function
at https://code.angularjs.org/1.3.0-beta.8/angular-resource.min.js:9:347
at Array.forEach (native)
at q (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:7:280)
at q.then.p.$resolved (https://code.angularjs.org/1.3.0-beta.8/angular-resource.min.js:9:329)
at J (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:101:5)
at J (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:101:5)
at https://code.angularjs.org/1.3.0-beta.8/angular.min.js:102:173
at g.$eval (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:113:138)
at g.$digest (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:110:215)
at g.$apply (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:113:468)
Angular.js 10016 - 10035:
Angular.js 10016 - 10035：
function consoleLog(type) {
var console = $window.console || {},
logFn = console[type] || console.log || noop,
hasApply = false;
// Note: reading logFn.apply throws an error in IE11 in IE8 document mode.
// The reason behind this is that console.log has type "object" in IE8...
try {
hasApply = !!logFn.apply;
} catch (e) {}
if (hasApply) {
return function() {
var args = [];
forEach(arguments, function(arg) {
args.push(formatError(arg));
});
return logFn.apply(console, args); // This is line 10033 where the error gets thrown.
};
}
Simplified resource:
简化资源：
angular.module('vgm.content-pages')
.factory('ContentPage', function($resource, $http) {
return $resource('/api/content-page/:id', { id:'@page.id' }, {
copy: {
method: 'POST',
url: '/api/content-page/copy/:id'
},
copies: {
method: 'GET',
isArray: true,
url: '/api/content-page/copies/:id'
}
});
});
Simplified directive where I'm getting the error:
出现错误的简化指令：
angular.module('vgm.genericForms')
.directive('vgmFormCopyPicker', function() {
return {
restrict: 'E',
replace: true,
templateUrl: '/static/common/generic-forms/widgets/view-copy-picker.html',
scope: {
resource: '=',
},
controller: function($scope, $element) {
$scope.pages = [];
$scope.loadCopies = function() {
$scope.resource.$copies()
.then(function(response) {
$scope.pages = response.data;
});
};
}
};
});
As soon as I run the loadCopiesmethod, executing the line $scope.resource.$copies()throws the error above.
一旦我运行该loadCopies方法，执行该行就会$scope.resource.$copies()引发上面的错误。
In the Chrome Inspector I see the call to my API is actually being done. But resolving the promise seems to throw some error...
在 Chrome Inspector 中，我看到对 API 的调用实际上正在完成。但是解决承诺似乎会引发一些错误......
How can I solve this error?
我该如何解决这个错误？
EDIT:
编辑：
$scope.resource = ContentPage.get({id: $stateParams.id}).$promise
$scope.resource.$save() // Works
$scope.resource.$update() // Works
$scope.resource.$copy() // Works
$scope.resource.$copies() // Does not work!
Angular Resource is trying to overwrite my initial resource with an array of items. But the instance of Resource does not have a method pushof course.
Angular Resource 试图用一组项目覆盖我的初始资源。但是Resource的实例push当然没有方法。
回答by Guido Bouman
I found the answer:
我找到了答案：
A resource is supposed to represent the matched data object for the rest of its lifespan. If you want to fetch new data you should do so with a new object.
资源应该在其生命周期的剩余时间内表示匹配的数据对象。如果你想获取新数据，你应该使用一个新对象。
$scope.copies = ContentPage.copies()
回答by Thomas
The answer from Guido is correct but I didn't get it at the first time.
Guido 的答案是正确的，但我第一次没有得到它。
If you add a custom method to your Angular $resourceand using isArray: trueand expecting to get an Array of something from your WebService you probably want to store the response in an Array.
如果您向 Angular 添加自定义方法$resource并使用isArray: true并期望从您的 WebService 获取某些内容的数组，您可能希望将响应存储在一个数组中。
Therefore you shouldn't use the instance method like this:
因此，您不应该像这样使用实例方法：
var ap = new Ansprechpartner();
$scope.nameDuplicates = ap.$searchByName(...);
But use the resource directly:
但是直接使用资源：
$scope.nameDuplicates = Ansprechpartner.searchByName(...)
Using following Angular resource:
使用以下 Angular 资源：
mod.factory('Ansprechpartner', ['$resource',
function ($resource) {
return $resource('/api/Ansprechpartner/:id',
{ id: '@ID' },
{
"update": { method: "PUT" },
"searchByName": { method: "GET", url: "/api/Ansprechpartner/searchByName/:name", isArray: true }
}
);
}
]);
回答by luckycat
I am using Mean.jsand this plagued for a few hours. There is a built in $updatebut it was not working when I tried to apply it to an object returned by a $resource. In order to make it work I had to change how I was calling the resource to update it.
我正在使用Mean.js，这困扰了几个小时。有一个内置的，$update但是当我尝试将它应用到由$resource. 为了使它工作，我不得不改变我调用资源来更新它的方式。
For example, with a Studentmodule, I was returning it with a $resourceinto $scope.student. When I tried to update student.$updatewas returning this error. By modifying the call to be Students.update()it fixed the problem.
例如，对于一个Student模块，我用一个$resourceinto返回它$scope.student。当我尝试更新student.$update时返回此错误。通过修改调用来Students.update()解决问题。
$scope.update = function() {
var student = $scope.student;
var result = Students.update(student);
if(result){
$scope.message = 'Success';
} else {
$scope.error =
'Sorry, something went wrong.';
}
};