为什么我在angularJS中一直得到undefined的TypeError设置属性？
[英]Why I keep getting TypeError setting property of undefined in angularJS?
问题描述
I'm writing a microblog app to teach myself angularJS. 
我正在写一个微博客应用程序来教自己angularJS。
Now an annoying problem is that I'm so messed up with service, factory and provider. 现在，一个令人烦恼的问题是，我对服务，工厂和提供者非常困惑。 After searching for the differences between them I choose service to fullfill the part of making post in my app. 在找到它们之间的差异之后，我选择了服务来填补我应用中发布帖子的部分。
But then I keep getting the error: TypeError: Cannot set property 'get' of undefined 但是然后我继续收到错误消息：TypeError：无法设置未定义的属性“ get”
My service code looks like: 我的服务代码如下：
angular.module('mblogApp.services',[]).
service('Posts', function(){
var posts = [];
this.prototype.get = function(){return posts};
this.prototype.push = function(user, text){
var post = {
user: user,
text: text,
time: Date.now()
};
posts.push(post);
};
});
And in my controller I wrote something like: 在我的控制器中，我写了类似以下内容：
angular.module('mblogApp.controllers').
controller('makePostCtrl', ['Posts', function($scope, Posts){
posts.push($scope.user, $scope.text);
}]).
controller('showPostCtrl', ['Posts', function($scope, Posts){
$scope.posts = Posts.get();
}
]);
Any good practice are appreciated. 任何良好的做法表示赞赏。 :). :)。
The problem sucks me so hard.I'm really tired of it.Tried to make it simple to find out where the error comes from and rewrite my code into a html file as follow: 这个问题让我很难受。我真的很累了。试图简化查找错误的根源并将我的代码重写为html文件，如下所示：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Angular Service Demo</title>
<script type="text/javascript" src="angular/angular.js"></script>
</head>
<body>
<div ng-controller="makePostCtrl">
<label for="name">Name: </label>
<input type="text" ng-model="name">
<br>
<label for="text">Text: </label>
<input type="text" ng-model="text">
<br>
<button ng-click="post()">post</button>
</div>
<div ng-controller="showPostCtrl">
<ul>
<li ng-repeat="post in posts">
<p>Name: {{post.name}}</p>
<p>Text: {{post.text}}</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = angular.module('app', []);
app.service('posts', function(){
this.posts = function(){
var posts = [];
return {
get: function(){return posts},
push: function(user, text){
posts.push({
user: user,
text: text
});
}
};
};
});
app.controller('makePostCtrl ', ['posts',function($scope, posts){
$scope.post = function(){
posts.push($scope.user, $scope.text);
};
$scope.posts = posts.get();
}]);
app.controller('showPostCtrl')
</script>
</html>
and the error goes like: 错误如下：
TypeError: Cannot call method 'get' of undefined
3 个解决方案
解决方案1
1 已采纳 2013-08-27 04:02:25
Change the service code to: 将服务代码更改为：
app.service('posts', function () {
var posts = [];
return {
get: function () {
return posts
},
push: function (user, text) {
posts.push({
user: user,
text: text
});
}
};
});
And the module are injected in order, you missed '$scope' so the module injection doesn't match. 然后按顺序注入模块，您错过了“ $ scope”，因此模块注入不匹配。
app.controller('makePostCtrl', ['$scope', 'posts', function ($scope, posts) {
解决方案2
0 2013-08-27 03:26:14
I believe you are missing dependency inject for your service. 我相信您缺少服务的依赖项注入。 Try this 尝试这个
angular.module('mblogApp.controllers',['mblogApp.services']).
解决方案3
0 2013-08-27 04:28:51
Try this code. 试试这个代码。
In your service make change like this; 为您服务，做出这样的改变；
angular.module('mblogApp'). service('Posts', function(){
var post_values = [];
return {
get : function(){
return post_values
},
push : function(user, text){
var post = {
user: user,
text: text,
time: Date.now()
};
post_values.push(post);
}
};
});
And your controller; 还有你的控制器；
var app = angular.module('mblogApp');
app.controller('makePostCtrl', ['Posts', function ($scope, Posts) {
Posts.push($scope.user, $scope.text);
});
app.controller('showPostCtrl', ['Posts', function ($scope, Posts) {
$scope.posts = Posts.get();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.