Javascript 如何在AngularJS中正确使用自定义服务
我正在尝试将控制器逻辑移动到服务。我添加了DataService并注入了$http。然后loadData()方法返回JSON。我已经将此服务注入到TestController中并调用了前面提到的函数,但它不起作用。同样的简单逻辑在控制器中正常工作。我应该改进什么?:) 我的观点看起来很简单:Javascript 如何在AngularJS中正确使用自定义服务,javascript,angularjs,Javascript,Angularjs,我正在尝试将控制器逻辑移动到服务。我添加了DataService并注入了$http。然后loadData()方法返回JSON。我已经将此服务注入到TestController中并调用了前面提到的函数,但它不起作用。同样的简单逻辑在控制器中正常工作。我应该改进什么?:) 我的观点看起来很简单: <body ng-app="TestApp" ng-controller="TestController as test"> <h1>Hello Plunker!</h
<body ng-app="TestApp" ng-controller="TestController as test">
<h1>Hello Plunker!</h1>
<p ng-repeat="item in test.personalInfo" ng-bind="item.firstname"></p>
<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<script src="script.js"></script>
</body>
你好,普朗克!
在您的代码存储中。loadData
在响应来自后端之前返回undefined。因此,请使用以下代码:
var app = angular.module('TestApp', []);
app.controller('TestController', TestController);
app.service('DataService', DataService);
function TestController(DataService) {
var vm = this;
DataService.loadData().then(function(data) {
vm.personalInfo = data.data
})
.catch(function(err) {
console.log(err)
})
}
function DataService($http) {
var store = this;
store.personInfo = [];
store.loadData = function() {
return $http.get('data.json')
};
}
第一步是定义术语“不工作”的含义:)并且,如果您希望
loadData
返回除[]
以外的任何内容,则不会返回,因为对$http
的调用是异步的。调用success
/error
回调时,您需要设置您的vm.personalInfo
。它看起来合理,但仍然不起作用。请参见此处使用数据。控制器中的数据请参见plunker
var app = angular.module('TestApp', []);
app.controller('TestController', TestController);
app.service('DataService', DataService);
function TestController(DataService) {
var vm = this;
DataService.loadData().then(function(data) {
vm.personalInfo = data.data
})
.catch(function(err) {
console.log(err)
})
}
function DataService($http) {
var store = this;
store.personInfo = [];
store.loadData = function() {
return $http.get('data.json')
};
}