AngularJS TypeError不是一个函数

Question

我在我的服务中有以下代码：

testApp.service('detailsService',['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http){

    var details;

    this.getDetails = function(name){

        return $http({
            method : "GET",
            url : name    
        }).then(function(response) {
           details= response.data;
           console.log(response.data);
           return response.data;
        });

    };

}]);

我想要做的是在我的控制器中调用这个函数，当页面（视图）加载时。

testApp.controller('testController', ['$scope', '$location', 'databaseService','detailsService', '$routeParams', function($scope, $location, databaseService, $routeParams, detailsService){

    $scope.details;

    var selectedDetails = function(name){
             detailsService.getDetails(name).then(function(data){
            $scope.details= data;
        });
    };

    selectedDetails(name);

}]);

我不断收到错误提示detailsService.getDetails不是一个函数。 我在另一个控制器中使用了同样的detailsService函数，但没有出现任何问题。

有人知道为什么我一直收到这个错误吗？

- Urban

---

可能是Angular - TypeError: XX不是一个函数的重复问题。 - Nikunj Sardhara

Answer 1

由于您没有正确地注入依赖项，因此预计会出现错误。 您需要使用正确的顺序。

testApp.controller('testController', ['$scope', 
    '$location', 
    'databaseService',
    'detailsService', 
    '$routeParams', 
    function($scope, $location, databaseService, detailsService, $routeParams ){

代替

testApp.controller('testController', ['$scope', 
    '$location', 
    'databaseService',
    'detailsService', 
    '$routeParams', 
    function($scope, $location, databaseService, $routeParams, detailsService){

注意 字符串部分和函数参数需要一一对应。

- Satpal

---

只是想补充一下，这个问题将解释“[]”的含义，以供那些不知道并且想要了解的人参考。https://dev59.com/q2Ml5IYBdhLWcg3w5aaQ - Brian

Answer 2

我遇到了这个错误，因为我向一个组件添加了回调方法，但是并不是所有使用该组件的页面都使用了这个回调方法：

<component [myCallbackFn]="fnNameToBindToFn">

component.ts:

public onClick() {
    // some code
    this.myCallbackFn();
}

每次未使用时，我都会收到这个错误，实际上是来自Java的NullPointerException。因此，在我的网站中使用的其他情况下，我不得不在回调之前在组件中添加一个检查来表示：

if (undefined !== this.myCallbackFn) this.myCallbackFn();

- Scala Enthusiast

Answer 3

在服务中删除Promise。只需返回请求即可。由于您正在从控制器捕获Promise，因此无需在服务中使用它

testApp.service('detailsService', ['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http) {
    var details;
    this.getDetails = function(name) {
        return $http({
            method: "GET",
            url: name
        })
    };
}]);

在注入服务时，还要确保序列是正确的顺序。

更改此内容

 testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, $routeParams, detailsService )

转换成这个

 testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, detailsService , $routeParams)

控制器

testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, detailsService , $routeParams) {
    $scope.details;
    var selectedDetails = function(name) {
        detailsService.getDetails(name).then(function(data) {
            $scope.details = data;
        });
    };
    selectedDetails(name);
}]);

- Sachila Ranawaka