当NG-重复/ NG-类调用它调用$函数HTTP无限循环 [英] Infinite loop when ng-repeat/ng-class calls a function which calls $http
问题描述
如果你不知道这是什么,请阅读:<一href=\"http://stackoverflow.com/questions/17466872/infinite-loop-with-angular-ex$p$pssion-binding\">Infinite环与前角pression结合
If you have no idea what this is, please read this :Infinite loop with Angular expression binding
在HTML文件:
<ui ng-repeat="carrierDetail in carrierDetails">
<li>
<i ng-class="{'icon-sign-blank':getStatus(carrierDetail.carrierId)==0,'icon-green':getStatus(carrierDetail.carrierId)==1,'icon-orange':getStatus(carrierDetail.carrierId)==2,'icon-red':getStatus(carrierDetail.carrierId)==3}"></i>
<ul ng-repeat="owner in getOwners(carrierDetail.carrierId)">
<li>{{owner.ownerName}}</li>
</ul>
</li>
</ui>
正如你所见,函数的getStatus()
被称为纳克级
和另一个函数 getOwners()
被称为 NG-重复
。而且,这两个函数将调用 $ HTTP
服务:
As you see, a function getStatus()
is called in ng-class
and another function getOwners()
is called in ng-repeat
. And, both functions will call $http
service:
$scope.getOwners = function(carrierId) {
$http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
return data.data.carrierOwners; // Returns an aray
}, function(data) {
return [];
});
}
$scope.getStatus = function(carrierId) {
$http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
return [1, 2, 3].indexOf(data.data.carrierStatus) != -1 ? data.data.carrierStatus : 0; // Returns an integer
}), function(data) {
return 0;
};
}
所以,我已经知道有两个函数调用无限。但我不能拿出一个解决方案。也许我可以为任何的功能创建一个指令。但我不知道如何使用指令纳克级
或 NG-重复
。是否有更简单的方法?谢谢你。
So, I already know that there are infinite calls for both functions. But I cannot come up with a solution. Maybe I can create a directive for either of the function. But I have no idea how to use the directive in ng-class
or ng-repeat
. Are there any simpler ways? Thanks.
推荐答案
首先,你的HTML不应该被调用函数pretty多少曾经(除了点击或类似的东西。
First, your html should not be calling functions pretty much ever (except for on click or something like that.
<ui ng-repeat="carrierDetail in carrierDetails">
<li>
<i ng-class="{'icon-sign-blank':carrierDetail.carrierId==0,'icon-green':carrierDetail.carrierId==1,'icon-orange':carrierDetail.carrierId==2,'icon-red':carrierDetail.carrierId==3}"></i>
<ul ng-repeat="owner in owners">
<li>{{owner.ownerName}}</li>
</ul>
</li>
</ui>
JS的,总体思路是:
The JS, the general idea is:
// assuming controller defined:
$scope.carriers = some kind of array;
$scope.getOwners = function(carrierId) {
$http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
return data.data.carrierOwners; // Returns an arary
}, function(data) {
return [];
});
}
$scope.getStatus = function(carrierId) {
$http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
return [1, 2, 3].indexOf(data.data.carrierStatus) != -1 ? data.data.carrierStatus : 0; // Returns an integer
}), function(data) {
return 0;
};
}
for( var i in $scope.carriers){
$scope.getOwners( $scope.carriers[ i ].carrierId ).then(function(success){
// add data to array
});
}
这篇关于当NG-重复/ NG-类调用它调用$函数HTTP无限循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!