为什么要角JS服务不起作用？ [英] Why Angular js Service does not work?
本文介绍了为什么要角JS服务不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我写的脚本来测试通过控制器之间的变量，所以我定义了一个服务，并在其上 getContents 声明变量，然后将它传递给下一个控制器 personController ，但不顺心的事，这是我的脚本：
＆LT;脚本＆GT; 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 = {};
}
}）;
＆LT; / SCRIPT＆GT;
什么是错的？
请注意：当我删除服务，控制器正常工作，并从数据/主页/ GET 。
编辑：这是我的编辑：
＆LT;脚本＆GT; 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 = {};
}
}）; ＆LT; / SCRIPT＆GT;
这是我的HTML：（更多帮助）
＆LT; DIV NG-应用=应用程序＆GT;
＆LT; DIV CLASS =容器NG-控制器=personControllerNG-的init =的getContent（）＆GT;
＆LT; DIV NG-秀= GTShowForm！; ＆LT;表类=表＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i个名字＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复=人的人＆GT;
＆LT; TD＆GT; {{person.Name}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
解决方案
您必须返回服务
服务
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屋！
查看全文
