我对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 当它全部在控制器中时起作用,但从功能方面来说,请求应该在工厂我认为。
答案 0 :(得分:3)
您正在从工厂返回$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保证函数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;
});;
&#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;