Angularjs 服务注入问题

Question

我第一次尝试向我的 Angular 项目添加服务，运行遇到将它注入我的控制器的问题。

我收到一个错误 -- TypeError: Cannot read property 'get' of undefined

我正在寻求将服务正确注入控制器以及改进代码的最佳方式 practices/efficiency。感谢您的帮助！

我的 angular 项目中有一个文件夹 /event，其中包含以下文件 --

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;
  };
}]);

Answer 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() 函数有几个问题。首先，您需要 return $http.get() 调用自身，然后您可以在您的控制器中调用 then() 并在您的 $scope 上将结果设置为属性 .其次，您不能 return 多个这样的值。您将必须 return 一个值数组或一个分配了您想要的值的对象。

服务

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);
};

Angularjs 服务注入问题

Angularjs Service Injection Issue

javascript

angularjs

angular-services