Angular JS 操作后重复请求页面如何解决 50
AngularJS页面渲染后进入动画过程,每次出现元素或div都会请求一次页面,导致页面统计数据会翻好几倍。页面效果跟请求毫无关系(就算断网也是可以正常执行,也没有$ht...
Angular JS 页面渲染后进入动画过程,每次出现元素或div都会请求一次页面,导致页面统计数据会翻好几倍。页面效果跟请求毫无关系(就算断网也是可以正常执行,也没有$http)。Dom是打开页面之后渲染好的,用visibility: hidden;隐藏起来的。不知道能不能帮我看下为什么会有这个情况,怎么避免~
--------------------------------------------------------------------------------------------
找到原因了,但是不知道怎么完全处理,这里说下,原因是ng-style="{'background-image':'url('+value+')'}"就会请求页面(不知道怎么解决)。我是通过自己写个避免用这个方法。
html:
<div back-img="{{value}}">
js:
angular.module('back.img',[]).directive('backImg',[function(){
return function(scope, element, attrs){
if(attrs.backImg){
element.css({'background-image': 'url(' + attrs.backImg +')'});
};
};
}]);
但是还是希望能得到一个可以原生的解决方案,比配置config什么的 展开
--------------------------------------------------------------------------------------------
找到原因了,但是不知道怎么完全处理,这里说下,原因是ng-style="{'background-image':'url('+value+')'}"就会请求页面(不知道怎么解决)。我是通过自己写个避免用这个方法。
html:
<div back-img="{{value}}">
js:
angular.module('back.img',[]).directive('backImg',[function(){
return function(scope, element, attrs){
if(attrs.backImg){
element.css({'background-image': 'url(' + attrs.backImg +')'});
};
};
}]);
但是还是希望能得到一个可以原生的解决方案,比配置config什么的 展开
1个回答
展开全部
在实际业务中经常需要等待几个请求完成后再进行下一步操作。但angularjs中$http不支持同步的请求。
解决方法一:
复制代码代码如下:
$http.get('url1').success(function (d1) {
$http.get('url2').success(function (d2) {
//处理逻辑
});
});
解决方法二:
then中的方法会按顺序执行。
复制代码代码如下:
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
function getJson(url){
var deferred = $q.defer();
$http.get(url)
.success(function(d){
d = parseInt(d);
console.log(d);
deferred.resolve(d);
});
return deferred.promise;
}
getJson('json1.txt').then(function(){
return getJson('json2.txt');
}).then(function(){
return getJson('json1.txt');
}).then(function(){
return getJson('json2.txt');
}).then(function(d){
console.log('end');
});
});
解决方法三:
$q.all方法第一个参数可以是数组(对象)。在第一参数中内容都执行完后就会执行then中方法。第一个参数的方法的所有返回值会以数组(对象)的形式传入。
复制代码代码如下:
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
$q.all({first: $http.get('json1.txt'),second: $http.get('json2.txt')}).then(function(arr){
console.log(arr);
angular.forEach(arr,function(d){
console.log(d);
console.log(d.data);
})
});
});
$q的详细使用方法网上的有很多教程。我也是刚接触。讲不好,不敢乱讲。上面的代码是我按我的理解写的,经过了测试没有问题。
解决方法一:
复制代码代码如下:
$http.get('url1').success(function (d1) {
$http.get('url2').success(function (d2) {
//处理逻辑
});
});
解决方法二:
then中的方法会按顺序执行。
复制代码代码如下:
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
function getJson(url){
var deferred = $q.defer();
$http.get(url)
.success(function(d){
d = parseInt(d);
console.log(d);
deferred.resolve(d);
});
return deferred.promise;
}
getJson('json1.txt').then(function(){
return getJson('json2.txt');
}).then(function(){
return getJson('json1.txt');
}).then(function(){
return getJson('json2.txt');
}).then(function(d){
console.log('end');
});
});
解决方法三:
$q.all方法第一个参数可以是数组(对象)。在第一参数中内容都执行完后就会执行then中方法。第一个参数的方法的所有返回值会以数组(对象)的形式传入。
复制代码代码如下:
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
$q.all({first: $http.get('json1.txt'),second: $http.get('json2.txt')}).then(function(arr){
console.log(arr);
angular.forEach(arr,function(d){
console.log(d);
console.log(d.data);
})
});
});
$q的详细使用方法网上的有很多教程。我也是刚接触。讲不好,不敢乱讲。上面的代码是我按我的理解写的,经过了测试没有问题。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询