问题描述
我正在尝试首次向我的Angular项目添加一项服务，并遇到在我的控制器中注入它的问题。
我收到错误 - TypeError: Cannot read property 'get' of undefined
我正在寻求将服务正确地注入控制器以及我可以改进代码以获得最佳实践/效率的方法。 谢谢您的帮助！
我的角度项目中有一个文件夹/事件，包含以下文件 -
app.js controllers.js directives.js services.js
app.js文件有 -
'use strict';
angular.module('vyrt.event', [
'vyrt.event.controllers',
'vyrt.event.services',
'vyrt.event.directives'
]);
services.js文件有 -
'use strict';
angular.module('vyrt.event.services', []).
service('VyrtEventService', ['$http', function($http) {
var artistId = 0,
artist = '',
events = [],
active_event_idx = 0;
this.get = function(artistId) {
var url = '/api/users/' + artistId + '/';
$http.get(url).success(function(data, status, headers, config) {
artist = data.artist.user;
events = data.artist.events;
active_event_id = data.artist.events[0].id;
});
return artist, events, active_event_id;
}
}]);
最后，控制器有 -
'use strict';
angular.module('vyrt.event.controllers', []).
controller('VyrtEventCtrl', ['$scope', function($scope, VyrtEventService) {
console.log(VyrtEventService.get($scope.artistId));
$scope.activeCampaign = function(idx) {
if (idx == VyrtEventService.active_event_idx) return true;
return false;
};
}]);
1楼
问题是，在定义控制器时，您忘记将“VyrtEventService”放入依赖关系列表中：
.controller('VyrtEventCtrl', ['$scope', /* you need this ==>*/ 'VyrtEventService', function($scope, VyrtEventService) {
console.log('VyrtEventService', VyrtEventService);
$scope.activeCampaign = function(idx) {
if (idx == VyrtEventService.active_event_idx) return true;
return false;
};
}]);
更新
你的get()函数有几个问题。
首先，您需要返回$http.get()调用本身，然后您可以在控制器中调用then()并将结果设置为$scope的属性。
其次，你不能像这样返回多个值。
您必须返回一个值数组或一个对象，并为其分配所需的值。
服务
this.get = function(artistId) {
var url = '/api/users/' + artistId + '/';
return $http
.get(url)
.catch(function(error){
// handle errors here
console.log('Error fething artist data: ', error);
});
}
调节器
VyrtEventService
.get(artistId)
.then(function(data){
$scope.artist = data.artist.user;
$scope.events = data.artist.events;
$scope.active_event_id = data.artist.events[0].id;
});
$scope.activeCampaign = function(idx) {
return (idx == $scope.active_event_idx);
};