javascript - 类型错误 : Service is not a function when calling API by angular js

Question

每当我运行由 angularjs 1.4.3 实现的应用程序时。

BannerService.js

app.service('BannerService',function ($http) {

    this.save = function saveBanner(banner) {
        return $http({
              method: 'POST',
                url: 'http://localhost:8081/api/banners'
            });
    }

});

BannerController.js

app.controller('BannerAddCtrl', ['$scope','$log','BannerService',
    function ($scope,$log, BannerService) {
        $scope.save = function() {
            BannerService.saveBanner(myBanner)
                .success(function (result) {
                    $log.debug('RESULT', result);
                }, function (reason) {
                    $log.debug('REASON', reason);
                });
        }

}]);

和index.html

 <div class="modal-footer">
    <button type="button" class="btn btn-primary btn-block" ng-click="save()">Save Banner</button>

  </div>

它抛出如下异常:

TypeError: BannerService.saveBanner is not a function
at ChildScope.$scope.save (bannerControllers.js:64)
at fn (eval at compile (angular.js:13145), <anonymous>:4:203)
at callback (angular.js:23298)
at ChildScope.$eval (angular.js:15846)
at ChildScope.$apply (angular.js:15945)
at HTMLButtonElement.<anonymous> (angular.js:23303)
at HTMLButtonElement.dispatch (jquery.js:4435)
at HTMLButtonElement.elemData.handle (jquery.js:4121)

谁能帮我解释为什么会出现错误。非常感谢您的宝贵时间。

Answer 1

查看错误信息:

BannerService.saveBanner is not a function

基本上，您的应用正在寻找分配给您的服务的属性 saveBanner。但是目前您还没有声明这样的属性。相反，您的服务包含一个名为 save 的属性，它定义了一个函数(称为 saveBanner)。

AngularJS 不关心分配给属性的命名函数。因此，您必须调整属性名称本身。所以你的服务的功能/属性应该是这样的。

this.saveBanner = function () { ... }