[JavaScript][角度]:类型错误:无法读取未定义的属性“getCityData”

[JavaScript][Angular]: TypeError: Cannot read property 'getCityData' of undefined

本文关键字：属性 未定义 getCityData 角度 JavaScript 类型 错误 读取      更新时间：2023-09-26

这个问题以前被问过很多次，我已经尝试了答案，但它们似乎并没有解决我面临的问题。我是 Angular 的新手，正在尝试将值从控制器传递到工厂，以便我可以通过 API 检索一些 JSON 信息。虽然我能够将值从我的 HTML 获取到控制器，但下一步是给我一个类型错误：无法读取未定义的属性"getCityData"。我的控制器代码如下：

app.controller('MainController', ['$scope', function($scope, HttpGetter) { 
var successFunction = function(data) {
        $scope.data = data;
    }
    var errorFunction = function(data) {
        console.log("Something went wrong: " + data);
    }
    $scope.cityName = '';
    $scope.getCityName = function(city) {
        $scope.cityName = city;
        HttpGetter.getCityData($scope.cityName, successFunction, errorFunction);
    };
}]);

出厂代码如下：

app.factory('HttpGetter', ['$http', function($http){
return {
        getCityData: function(query, successFunction, errorFunction){
            return $http.get('http://api.apixu.com/v1/current.json?key=MyAppKey&q=' + query).
            success(successFunction).
            error(errorFunction);
        }
    };
  }]);
为了

安全起见，我已将我的应用程序密钥替换为字符串"MyAppKey"，但我的代码包含适当的密钥。此外，如果我能深入了解函数调用是如何发生的，那将非常有帮助，因为似乎有很多函数回调正在发生。

获得undefined可能是因为服务未正确注入。

尝试：

app.controller('MainController', ['$scope', 'HttpGetter', function($scope, HttpGetter)

另外，正如您所说，为了安全起见，您没有使用正确的密钥，但是使用您的应用程序的任何人都可以通过检查网络调用来获取密钥。因此，理想情况下，应该调用后端，后端会将调用与安全密钥一起发送到所需的 API 端点，并将响应数据返回到前端。

可能是由于['$scope', function($scope, HttpGetter) ？

应该改为['$scope', 'HttpGetter', function($scope, HttpGetter)。

您使用缩小版本并仅注入$scope而不是HttpGetter而是用作控制器函数中的参数，这就是为什么得到HttpGetter是不可欺骗的，并且显示错误 无法读取未定义的属性"getCityData"

因此，您应该在缩小版本中注入HttpGetter ['$scope', 'HttpGetter'

像这样使用：

app.controller('MainController', ['$scope', 'HttpGetter', function($scope, HttpGetter)

而不是 

app.controller('MainController', ['$scope', function($scope, HttpGetter)

如果您的MyAppKey是安全的并且想要对用户隐藏，那么您应该在服务器端使用它

相关文章：