錯誤：不是功能 - 角度服務

Question

我試圖調用服務中定義的函數。

var app = angular.module('title', ['flash', 'ngAnimate', 'ngRoute'], 
    function ($interpolateProvider) { 

     $interpolateProvider.startSymbol('[['); 
     $interpolateProvider.endSymbol(']]'); 
    }) 

.service('getWidgets', function (globalServices, $http) { 

    var getData = function() { 

     var getWidgetUrl = globalServices.baseUrl + "admin/widget/list-text-widget"; 
     return $http({method:"GET", url:getWidgetUrl}) 
      .then(function(result){ 

       return result.data; 
      }); 
    }; 

    return { getData: getData }; 
}); 

呼喚節

var widget = getWidgets.getData() 
    .then(function (result) { 

     $scope.widgets = result; 
     $scope.$apply(); 
    }); 

但它返回一個錯誤getWidgets.getData is not a function。

根本原因是什麼？

Answer 1

更改與此：

angular.module('dss') 
    .controller('widgetCtrl', 
    ['$scope', '$compile', '$window', '$location', '$http', 'globalServices', 'getWidgets', 'Flash', '$timeout', '$sce', '$routeParams', widgetCtrl]); 

    function widgetCtrl($scope, $compile, $window, $location, $http, globalServices, getWidgets, Flash, $timeout, $sce, $routeParams) { 

    var widget = getWidgets.getData(); 
    widget.then(
     function (result) { 
      $scope.widgets = result; $scope.$apply(); 
     });  
} 

編輯：如果你想要一個建議，請使用此語法：

widgetCtrl.$inject = ['$scope', '$compile', '$window', '$location', '$http', 'globalServices', 'getWidgets', 'Flash', '$timeout', '$sce', '$routeParams']; 

angular.module('dss').controller('widgetCtrl', widgetCtrl); 

function widgetCtrl($scope, $compile, $window, $location, $http, globalServices, getWidgets, Flash, $timeout, $sce, $routeParams) { 

    var widget = getWidgets.getData(); 
    widget.then( 
     function (result) { 
      $scope.widgets = result; $scope.$apply(); 
     });  
} 

Answer 2

您正在使用服務並在其構造函數上返回一個對象。 服務初始化爲 new yourFunction和工廠爲yourFunction()。

將它從服務切換到工廠，它將工作。

編輯：如果你想繼續使用服務，試試這個。 注意，我改變了服務的名稱

function GetWidgetsService($http, globalServices){ 
    this._$http = $http; 
    this._globalServices = globalServices; 
} 

GetWidgetsService.prototype.getData = function() { 
    var getWidgetUrl = this._globalServices.baseUrl + "admin/widget/list-text-widget"; 
    // Angular $http() and then() both return promises themselves 
    return this._$http({method:"GET", url:getWidgetUrl}).then(function(result){ 

     // What we return here is the data that will be accessible 
     // to us after the promise resolves 
     return result.data; 
    }); 
}; 

angular.module('yourModule').service('getWidgetsService', GetWidgetsService); 

編輯2：爲了完整起見，這裏是你的固定工廠

angular.module('yourModule').factory('getWidgetsFactory', function ($http, globalServices) { 
    return { 
     getData: function() { 
      var getWidgetUrl = globalServices.baseUrl + 'admin/widget/list-text-widget'; 
      // Angular $http() and then() both return promises themselves 
      return $http({method: 'GET', url: getWidgetUrl}).then(function (result) { 

       // What we return here is the data that will be accessible 
       // to us after the promise resolves 
       return result.data; 
      }); 
     } 
    }; 
}); 

編輯3：HERE是JSBin與你的代碼工作我的第一個方案

Answer 3

嘗試這種方式

.service('getWidgets', function (globalServices, $http) { 
    return { getData: function() { 
     var getWidgetUrl = globalServices.baseUrl + "admin/widget/list-text-widget"; 
     // Angular $http() and then() both return promises themselves 
     return $http({method:"GET", url:getWidgetUrl}).then(function(result){ 

      // What we return here is the data that will be accessible 
      // to us after the promise resolves 
      return result.data; 
     }); 
    }; 
}; 
});