为什么要角JS服务不起作用? [英] Why Angular js Service does not work?
问题描述
我写的脚本来测试通过控制器之间的变量,所以我定义了一个服务,并在其上 getContents
声明变量,然后将它传递给下一个控制器 personController
,但不顺心的事,这是我的脚本:
<脚本> angular.module(应用程序,[])。服务(personService功能(){
变种getContents = {};
})
.controller(personController功能($ HTTP,$范围,personService){ $ scope.GetContents =功能(){
$ http.get(/首页/ GET)。成功(功能(数据){
调试器;
personService.getContents =数据;
$ scope.Persons =数据;
});
} $ scope.Save =功能(){ $ http.post(addPerson的$ scope.model).success(功能(状态){
调试器;
的console.log('状态=',地位);
$ scope.ShowForm = FALSE;
$ scope.GetContent();
});
} $ scope.AddPerson =功能(){
$ scope.ShowForm = TRUE;
$ scope.model = {};
}
});
< / SCRIPT>
什么是错的?
请注意:当我删除服务
,控制器正常工作,并从数据/主页/ GET
。
编辑:这是我的编辑:
<脚本> angular.module(应用程序,[])。服务(personService功能(){ 变种含量= {};
返回{
的getContent:功能(){
返回的内容;
},
setContent:函数(值){
内容=价值;
}
};
}) .controller(personController功能($ HTTP,$范围,personService){ $ scope.GetContents =功能(){
调试器;
$ http.get(/首页/ GET)。成功(功能(数据){
调试器;
的console.log(successData:,数据); //控制台没有登录
personService.setContent(数据);
的console.log(ServiceData:personService.getContent())//控制台没有登录过
$ scope.Persons =数据;
});
} $ scope.AddPerson =功能(){
$ scope.ShowForm = TRUE;
$ scope.model = {};
}
}); < / SCRIPT>
这是我的HTML:(更多帮助)
< DIV NG-应用=应用程序>
< DIV CLASS =容器NG-控制器=personControllerNG-的init =的getContent()>
< DIV NG-秀= GTShowForm!; <表类=表>
<&THEAD GT;
&所述; TR>
<第i个名字< /第i
< / TR>
< / THEAD>
<&TBODY GT;
< TR NG重复=人的人>
< TD> {{person.Name}}< / TD>
< / TR>
< / TBODY>
< /表>
< / DIV>< / DIV>
您必须返回服务
服务
angular.module(应用程序,[])。服务(personService功能(){
变种含量= {}; 变种人= {
setContent:函数(项目){
内容=项目;
}
的getContent:功能(){
返回的内容;
};
}; 返回的人;
})
控制器
.controller(personController功能($ HTTP,$范围,personService){ $ scope.GetContents =功能(){
$ http.get(/首页/ GET)。成功(功能(数据){
调试器;
personService.setContent(数据); //设置内容服务..
$ scope.Persons =数据;
});
} $ scope.Save =功能(){ $ http.post(addPerson的$ scope.model).success(功能(状态){
调试器;
的console.log('状态=',地位);
$ scope.ShowForm = FALSE;
personService.getContent(); //从服务内容..
});
} $ scope.AddPerson =功能(){
$ scope.ShowForm = TRUE;
$ scope.model = {};
}
定义personService.getContent(),以$范围变量显示视图页面上。
$ scope.content = personService.getContent();
I wrote script to test passing variables between controllers, so i define a service and declare variable on it getContents
, then pass it to next controller personController
, but something goes wrong, this is my script:
<script>
angular.module("app", []).service("personService", function () {
var getContents = {};
})
.controller("personController", function ($http, $scope, personService) {
$scope.GetContents = function () {
$http.get("/Home/Get").success(function (data) {
debugger;
personService.getContents = data;
$scope.Persons = data;
});
}
$scope.Save = function () {
$http.post("AddPerson",$scope.model).success(function (status) {
debugger;
console.log('status =', status);
$scope.ShowForm = false;
$scope.GetContent();
});
}
$scope.AddPerson = function () {
$scope.ShowForm = true;
$scope.model = {};
}
});
</script>
what is wrong?
NOTE: when i remove the Service
, the controller work properly and get data from /Home/Get
.
Edit: this is my edit:
<script>
angular.module("app", []).service("personService", function () {
var Content = {};
return {
getContent: function () {
return Content;
},
setContent: function (value) {
Content = value;
}
};
})
.controller("personController", function ($http, $scope, personService) {
$scope.GetContents = function () {
debugger;
$http.get("/Home/Get").success(function (data) {
debugger;
console.log("successData :", data); //console did not log
personService.setContent(data);
console.log("ServiceData:",personService.getContent()) //console did not log too
$scope.Persons = data;
});
}
$scope.AddPerson = function () {
$scope.ShowForm = true;
$scope.model = {};
}
});
</script>
and this is my html:(for more help)
<div ng-app="app">
<div class="container" ng-controller="personController" ng-init=" GetContent()">
<div ng-show="!ShowForm">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in Persons">
<td>{{person.Name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
you have to return service
service
angular.module("app", []).service("personService", function () {
var content = {};
var person = {
setContent :function(item){
content = item;
}
getContent : function(){
return content;
};
};
return person;
})
Controller
.controller("personController", function ($http, $scope, personService) {
$scope.GetContents = function () {
$http.get("/Home/Get").success(function (data) {
debugger;
personService.setContent(data); // set content to service..
$scope.Persons = data;
});
}
$scope.Save = function () {
$http.post("AddPerson",$scope.model).success(function (status) {
debugger;
console.log('status =', status);
$scope.ShowForm = false;
personService.getContent(); // get content from service..
});
}
$scope.AddPerson = function () {
$scope.ShowForm = true;
$scope.model = {};
}
define personService.getContent() to $scope variable to display on view page.
$scope.content = personService.getContent();
这篇关于为什么要角JS服务不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!