javascript - 无法读取未定义的 Angular 工厂的属性

Question

我对 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;
});

用这个 Controller

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 当它全部在 Controller 中时工作，但从功能方面来说，我认为请求应该在工厂中。

Answer 1

您正在从工厂返回 $q promise。它没有方法 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 将其链接到您的 Controller 中。

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 中注入(inject)的其他参数来重新验证。由于原始代码中的参数不匹配，这很容易发生。例如:-

 .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>