[英]Why I keep getting TypeError setting property of undefined in angularJS?
我正在寫一個微博客應用程序來教自己angularJS。
現在,一個令人煩惱的問題是,我對服務,工廠和提供者非常困惑。 在找到它們之間的差異之后,我選擇了服務來填補我應用中發布帖子的部分。
但是然后我繼續收到錯誤消息:TypeError:無法設置未定義的屬性“ get”
我的服務代碼如下:
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);
};
});
在我的控制器中,我寫了類似以下內容:
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();
}
]);
任何良好的做法表示贊賞。 :)。
這個問題讓我很難受。我真的很累了。試圖簡化查找錯誤的根源並將我的代碼重寫為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>
錯誤如下:
TypeError:無法調用未定義的方法“ get”
將服務代碼更改為:
app.service('posts', function () {
var posts = [];
return {
get: function () {
return posts
},
push: function (user, text) {
posts.push({
user: user,
text: text
});
}
};
});
然后按順序注入模塊,您錯過了“ $ scope”,因此模塊注入不匹配。
app.controller('makePostCtrl', ['$scope', 'posts', function ($scope, posts) {
我相信您缺少服務的依賴項注入。 嘗試這個
angular.module('mblogApp.controllers',['mblogApp.services']).
試試這個代碼。
為您服務,做出這樣的改變;
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);
}
};
});
還有你的控制器;
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.