我正在寻找一种"包装"所有$http请求的方法,这样我可以gif在应用程序进行某些处理时显示图像.我也希望将相同的解决方案用于其他类型的后台处理而不仅仅是$http.
为什么我问的原因是我总要为我设置processingIndicator到true,然后我切换回success函数,而不是优雅的.
我看到的一个可能的解决方案是使用一个函数将函数作为参数.此函数将设置processingIndicator为true,调用该函数,然后设置processingIndicator回"false".
function processAjaxRequestSuccessFn(fooFn){
// display processing indicator
fooFn();
// hide processing indicator
}
然后
$http.get(...).then(processAjaxRequestSuccessFn, processAjaxRequestErrorFn)
这个解决方案不是很方便,因为每次我需要通知用户发生了什么事情时,我需要使用这个功能.
我正在寻找一种自动化这个过程的方法.
还有其他想法吗？
稍后编辑
另一个想法我是延长$http我自己的get,post等等,或者创建具有类似行为的自定义服务.但仍然不是很优雅.
这是我无法从挖掘AngularJS代码中找到的东西,也许你可以帮助解决这个谜.
为了展示它,我向AngularJS种子项目添加了一项服务:
function MyServiceProvider() {
console.log('its my service');
this.providerMethod = providerMethod;
function providerMethod() {
console.log('its my service.providerMethod');
}
this.$get = $get;
function $get() {
var innerInjectable = {
name: 'stam'
};
return innerInjectable;
}
}
var serviceModule = angular.module('myApp.services', []).
value('version', '0.1').
provider('myservice',MyServiceProvider);
您可以看到此提供程序公开$ get和某个'providerMethod'.
现在,对于注入用法:如果我们调用config,我们可以注入整个类并访问'外部'提供者方法:
serviceModule.config(function(myserviceProvider) {
console.log('myServiceProvider:',myserviceProvider);
myserviceProvider.providerMethod();
});
但是当我们将它注入控制器时(注意无提供者名称),只会暴露$ get返回值:
function MyCtrl1(myservice) {
console.log('MyCtrl1.myservice =',myservice,myservice.name);
}
MyCtrl1.$inject = ['myservice'];
控制台输出遵循它应该:它的我的服务myServiceProvider:构造函数{providerMethod:function,$ get:function}它的我的service.providerMethod MyCtrl1.myservice = Object {name:"stam"} stam
任何人都可以解释这个区别吗？原因？非常感谢任何想法
利奥尔
PS:我在angular-ui 新的 ui-router(优秀项目!)中看到了这种技术.我需要访问外部提供者类来在茉莉花和其他地方进行注射 - 无济于事
我得到了角度服务,我需要配置,这样我就可以从我的应用程序中删除耦合并分享我的一些代码.
我的问题是你是如何实现这一目标的？
使用module.value()和依赖注入？那么你如何获得默认值？如何在init处计算值而不是硬编码？
有另一项服务？你怎么做那个通用的？
你有代码例子吗,因为我有点迷失了.
我已经按照以下教程,以便在我的AngularJS项目中集成臭名昭着的bluimp jQuery文件上传器.
经过一些研究,我发现在options数组中,在jquery.fileuploader.js文件中,有一个名为autoUpload的选项,当设置为true时会自动上传文件.我试图禁用它(假,未定义),但很快我就知道这导致上传根本不起作用,甚至在表单提交上也没有.
我需要手动触发上传,比如在另一个回调中,或者通过点击事件触发.可以这样做吗？
码:
app.directive("fileupload", function() {
return {
restrict: "A",
scope: {
done: "&",
progress: "&",
fail: "&",
uploadurl: "=",
customdata: "&"
},
link: function(scope, elem, attrs) {
var uploadOptions;
uploadOptions = {
url: scope.uploadurl,
dataType: "json"
};
if (scope.done) {
uploadOptions.done = function(e, data) {
return scope.$apply(function() {
return scope.done({
e: e,
data: data
});
});
};
}
if (scope.fail) {
uploadOptions.fail = function(e, data) {
return scope.$apply(function() {
return scope.fail({
e: e,
data: data …假设我DSerrorLog在不同的模块下有三个同名的工厂
angular.module('module1').factory('DSerrorLog', function () {
return { show: false, msg: "" };
});
angular.module('module2').factory('DSerrorLog', function () {
return { show: false, msg: "" };
});
angular.module('module3').factory('DSerrorLog', function () {
return { show: false, msg: "" };
});
如何从注入正确的模块如一个正确的情况DSerrorLog下module3进入我的控制器？我想这样的语法module3.DSerrorLog在这里不起作用.
angular.module('mainApp', ['module1', 'module2', 'module3'])
app.controller('MainCtrl', function ($scope, DSerrorLog) {
});
如何跨路线维护模型.例如,我有一个加载到主页的配置文件列表.主页还包含"加载更多"操作以加载更多配置文件,基本上将数据推送到模型.单击特定配置文件时,将通过路径激活该配置文件的详细视图.详细视图有一个后退按钮,可将用户重定向回主页.在路由回到主页时,由"加载更多"动作加载的数据(配置文件)将丢失.我需要使用"加载更多"前置数据来维护模型
以下是使用的代码
/* Controllers */
var profileControllers = angular.module('profileControllers', ['profileServices'])
profileControllers.controller('profileListCtrl', ['$scope','$location', 'Profile','$http',
function($scope,$location, Profile,$http) {
$scope.Profiles = Profile.query(function(){
if($scope.Profiles.length < 3) {
$('#load_more_main_page').hide();
}
});
$scope.orderProp = 'popular';
$scope.response=[];
//LOADMORE
$scope.loadmore=function()
{
$http.get('profiles/profiles.php?profile_index='+$('#item-list .sub-item').length).success(function(response){
if(response) {
var reponseLength = response.length;
if(reponseLength > 1) {
$.each(response,function(index,item) {
$scope.Profiles.push({
UID: response[index].UID,
id: response[index].id,
popular: response[index].popular,
imageUrl: response[index].imageUrl,
name: response[index].name,
tags: response[index].tags,
category: response[index].category
});
});
}
if(reponseLength < 3) {
$('#load_more_main_page').hide();
}
}
});
}
}]);
/* App Module */
var …angularjs angularjs-service angularjs-scope angularjs-routing ngroute
我TypeError: undefined is not a function在我的代码中找到解决方案时遇到了问题.我有以下app.js:
var app = angular.module('test', ['ngRoute', 'test.services', 'test.directives', 'test.controllers']);
app.config(function ($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/q/:q', {
templateUrl: '/templates/productlist.html',
controller: 'ProductCtrl'
}).
otherwise({
redirectTo: '/q'
});
});
然后我有一个控制器
var controllers = angular.module('test.controllers', []);
controllers.controller('ProductCtrl', ['$scope', '$routeParams', 'ProductFactory',
function ($scope, ProductFactory, $routeParams) {
$scope.query = $routeParams.q;
$scope.products = ProductFactory.query({query: $scope.query});
}]);
还有一家工厂
var services = angular.module('test.services', ['ngResource']);
var baseUrl = 'http://localhost\\:8080';
services.factory('ProductFactory', function ($resource) {
return $resource(baseUrl + '/test/smart/:query', {}, {
query: { …我正在尝试对使用$ http的服务进行单元测试.我正在使用Jasmine并且我继续收到此错误:
TypeError:解析在angular.js中未定义(第13737行)
这就是我的服务:
angular.module('myapp.services', [])
.factory('inviteService', ['$rootScope', '$http', function($rootScope, $http) {
var inviteService = {
token: '',
getInvite: function(callback, errorCallback) {
$http.get('/invites/' + this.token + '/get-invite')
.success(function(data) {
callback(data);
})
.error(function(data, status, headers, config) {
errorCallback(status);
});
}
};
return inviteService;
}]);
这是我的测试看起来像:
describe ('Invite Service', function () {
var $httpBackend, inviteService, authRequestHandler;
var token = '1123581321';
beforeEach(module('myapp.services'));
beforeEach(inject(function ($injector) {
$httpBackend = $injector.get('$httpBackend');
authRequestHandler = $httpBackend.when('/invites/' + token + '/get-invite').respond({userId: 'userX'}, {'A-Token': 'xxx'});
inviteService = $injector.get('inviteService');
}));
afterEach …我已经尝试了一切来让ui-router决定将它的值传递给给定的控制器-AppCtrl.我正在使用依赖注入$inject,这似乎导致了问题.我错过了什么？
路由
$stateProvider.state('app.index', {
url: '/me',
templateUrl: '/includes/app/me.jade',
controller: 'AppCtrl',
controllerAs: 'vm',
resolve: {
auser: ['User', function(User) {
return User.getUser().then(function(user) {
return user;
});
}],
}
});
调节器
appControllers.controller('AppCtrl', AppCtrl);
AppCtrl.$inject = ['$scope', '$rootScope'];
function AppCtrl($scope, $rootScope, auser) {
var vm = this;
console.log(auser); // undefined
...
}
编辑 这里是一个插件http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview
我有一个Angular Factory,其工作是保存特殊对象并在以后检索它们.
(用于在切换视图时保存用户工作流程).
基本上我需要保存带有名称的对象以及一组标签.我的问题是将标签保存到数组部分.
Prototype构造函数:
// define the TagsObject constructor function
var TagsObject = function(name, tag) {
this.name = name;
this.tags = [].push(tag);
return this;
};
完整的工厂代码:
.factory('TagFactory', [function() {
// Init TagFactory:
var tagContainers = [];
// define the TagsObject constructor function
var TagsObject = function(name, tag) {
this.name = name;
this.tags = [].push(tag);
return this;
};
console.log('tagFactory');
console.log(TagsObject);
var saveTags = function(name, tag) {
tagContainers.push(new TagsObject(name, tag));
console.log('saveTags:');
console.log(tagContainers);
};
var getTags = function(name) {
console.log(name);
return this; …javascript prototype angularjs angularjs-service angularjs-factory
angularjs ×10
javascript ×5
ajax ×1
ajax-upload ×1
angular-ui ×1
jasmine ×1
ngroute ×1
prototype ×1
unit-testing ×1