AngularJS TypeError：“ track”不是函数

Question

我试图从控制器方法中调用带有参数的服务，但出现错误消息说它不是函数。 这是我的代码：

(function (){

angular.module('app.uploadedReleases')
        .controller('UploadedReleasesController', UploadedReleasesController)
        .controller('ModalController', ModalController);


UploadedReleasesController.$inject = ['$log', '$scope', '$modal', 'ReleaseService', 'TrackService'];
function UploadedReleasesController ($log, $scope, $modal, releaseService, trackService){

        vm.selectTrack = selectTrack;

       function selectTrack(album, track, index){

        trackService.currentTrack(album.slug, track.fileName).then(function(responseValue){
            vm.temp = responseValue;
        });
        vm.formTrack = vm.selected.track;
    }
}

这是我的名为trackService的服务：

angular.module('app.services')
        .service('TrackService', TrackService);

TrackService.$inject = ['$http', '$q'];

function TrackService($http, $q){
    var trackService = {};

    var releasesUrl = 'http://localhost:8080/api/releases';
    trackService.currentTrack = currentTrack;

        function currentTrack(releaseSlug, trackSlug){
        var trackUrl = releasesUrl + '/'+ releaseSlug + '/' + trackSlug + '/track';
        var deferred = $q.defer();

        $http.get(trackUrl).then(function(trackResponse){
            return deferred.resolve(trackResponse);
        }, function(error){
            return deferred.reject({msg: 'Error while getting the current track details'})
        });
      return deferred.promise;
    }
}

我为什么会在控制器中收到错误的任何提示： TypeError: trackService.currentTrack is not a function

Answer 1

@Pankaj Parkar的答案是正确的，你应该返回从一个承诺currentTrack以链then在您的控制器。

但是，要回答有关TypeError的问题，请在TrackService混合使用工厂语法和服务语法。

要使其成为工厂，请返回公开函数的映射：

function TrackService($http, $q){
    var trackService = {};
    trackService.currentTrack = currentTrack;

    function currentTrack(releaseSlug, trackSlug){
        //...
    }

    return trackService;
}

并使用.factory('TrackService', TrackService); 。

要使其成为一项服务，请将公开的功能添加this ：

function TrackService($http, $q){
    this.currentTrack = currentTrack;

    function currentTrack(releaseSlug, trackSlug){
        //...
    }
}

并使用.service('TrackService', TrackService); 。

Answer 2

我要说的第一件事是，您正在创建服务，然后应将方法绑定this上下文，而不是创建对象。

var trackService = {};

会变成

var trackService = this;

但是从服务返回自定义对象也没有错。 因此，在当前情况下，您错过了退还它的机会。 在您的服务代码末尾添加

return trackService 

仍然对服务和工厂的工作方式感到困惑，我建议您仔细阅读此答案

---

您应该从以自定义方式创建的trackService.currentTrack方法返回一个trackService.currentTrack 。

trackService.currentTrack = currentTrack;
function currentTrack(releaseSlug, trackSlug){
    var trackUrl = releasesUrl + '/'+ releaseSlug + '/' + trackSlug + '/track';
    var deferred = $q.defer();
    $http.get(trackUrl).then(function(trackResponse){
        return deferred.resolve(trackResponse);
    }, function(error){
        return deferred.reject({msg: 'Error while getting the current track details'})
    });
    return deferred.promise; //returned promise
}

---

相反，您应该执行自定义的$http.get ，将其视为反模式，以实现在$http.get方法返回的$http.get ，您应该利用它。

重构版本

trackService.currentTrack = currentTrack;
    function currentTrack(releaseSlug, trackSlug){
    var trackUrl = releasesUrl + '/'+ releaseSlug + '/' + trackSlug + '/track';
    return $http.get(trackUrl).then(function(trackResponse){
        return trackResponse;
    }, function(error){
        return {msg: 'Error while getting the current track details'};
    });
}