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

时间:2015-01-15 18:45:38

标签: javascript angularjs

我对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 当它全部在控制器中时起作用,但从功能方面来说,请求应该在工厂我认为。

1 个答案:

答案 0 :(得分:3)

您正在从工厂返回$q承诺。它没有方法successerror它们是$http在返回的httpPromise中添加的特殊函数(它只是QPromise的扩展)。

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

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

或者使用标准q保证函数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.

工作演示

&#13;
&#13;
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;
});;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
</div>
&#13;
&#13;
&#13;