无法读取未定义的角度工厂的属性

Cannot read property of undefined angular factory

本文关键字：工厂 属性 读取 未定义      更新时间：2023-09-26

>我对 Angular 工厂有问题，我已经尝试了很多方法，但它是一样的。

这是错误：

TypeError: Cannot read property 'getSchedule' of undefined
        at new <anonymous> (http://127.0.0.1:4767/js/ctrls/main.js:3:19)
        at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:35:36)
        at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:35:165)
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:67:419
        at link (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js:7:248)
        at N (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:54:372)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256)
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:46:377
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:48:217
        at F (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:52:28) <ng-view class="app-content ng-scope" ng-hide="loading">

我以这种方式构建了主应用程序：

'use strict';
// Declare chat level module which depends on views, and components
angular.module('BenShowsApp', [
    'ngRoute',
    'ngResource',
    'mobile-angular-ui',
    'BenShowsApp.filters',
    'BenShowsApp.services',
    'BenShowsApp.directives',
    'BenShowsApp.controllers'
]).
config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/schedule', {
                templateUrl: 'partials/main.html',
                controller: 'MainCtrl'
            });
}]);
//Initialize individual modules
var services = angular.module('BenShowsApp.services', []);
var factories = angular.module('BenShowsApp.factories', []);
var controllers = angular.module('BenShowsApp.controllers', []);
var filters = angular.module('BenShowsApp.filters', []);
var directives = angular.module('BenShowsApp.directives', []);

并尝试使用此工厂/服务

services.factory('tvRage', function($http) {
        var tvRage = {};
        tvRage.getSchedule = function() {
            return $http({
                method: 'get',
                url: 'http://services.tvrage.com/feeds/fullschedule.php',
                params: {
                    country: 'US',
                    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
                }
            }).then(function (response) {
                return response.data;
            });
        };
    return tvRage;
});

使用此控制器

controllers.controller('MainCtrl', ['$scope','$http','tvRage',
    function ($scope, $http, tvRage) {
            tvRage.getSchedule().success(function(data){
                var parser = new X2JS();
                var x2js = parser.xml_str2json(data);
                $scope.request = x2js;
            }).error(function(){
                alert('nouuu');
            });
    }
]);

当它全部在控制器中时，$http可以工作，但从功能方面来看，我认为该请求应该在工厂中。

您正在从工厂返回$q承诺。它没有success的方法，error它们是$http在返回的httpPromise中添加的特殊函数（这只是QPromise的扩展）。

您可以通过删除then链接来更改工厂以返回 httpPromise：

  return $http({
            method: 'get',
            url: 'http://services.tvrage.com/feeds/fullschedule.php',
            params: {
                country: 'US',
                key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }
        });

或者使用标准 q promise 函数将其链接到控制器中 then/catch .

controllers.controller('MainCtrl', ['$scope','$http','tvRage',
    function ($scope, $http, tvRage) {
            tvRage.getSchedule().then(function(data){
                var parser = new X2JS();
                var x2js = parser.xml_str2json(data);
                $scope.request = x2js;
            }).catch(function(){
                alert('nouuu');
            });
    }
]);

但是由于您遇到的特定错误，看起来可能在原始代码中，您的 DI 列表与参数列表不匹配。通过记录控制器中注入的tvRage和其他参数来重新验证。由于原始代码中的参数不匹配，这很容易发生。前任：-

 .controller('MainCtrl', ['$scope','tvRage', function ($scope, $http, tvRage){
    //Now tvRage will be undefined and $http will be tvRage.

工作演示

angular.module('app', []).controller('ctrl', ['$scope', '$http', 'tvRage',
  function($scope, $http, tvRage) {
    tvRage.getSchedule().success(function(data) {
      console.log(data)
    }).error(function() {
      alert('nouuu');
    });
  }
]).factory('tvRage', function($http) {
  var tvRage = {};
  tvRage.getSchedule = function() {
    return $http({
      method: 'get',
      url: 'http://services.tvrage.com/feeds/fullschedule.php',
      params: {
        country: 'US',
        key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
      }
    });
  };
  return tvRage;
});;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
</div>

相关文章：