这是html代码:
<li ng-repeat="data in spreadGroupData" ng-click="channelList(data.campaigns,data.name)"><a href="javascript:void(0)">{{data.name}}</a></li>`
这是我在services.js中编写的代码:
services.getChannelName = function($scope,channelidList){
httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
$http.get(httpurl).success(function(data){
if(data.length>0){
$scope.spreadGroupData = [];
for(var i in data){
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
};
$ scope.spreadGroupData中有数据,为什么无法在视图页面中显示?
现在我知道我不应该在服务中使用$scope
,但是param&quot; channelidList&#39;我从另一种服务方法得到它。如何重写这一切?
services.getListData = function(scope,flag){
var reportList = "quality_report",merger = true;
if(typeof flag!='undefined' && flag == 1){
reportList = "fakequality_report";
merger = false;
}
var cids = scope.spreadUrls,dateArr=scope.date.split(" - "),startDate = "",endDate = "",channelids = "";
if(dateArr.length==1){
startDate = endDate = dateArr[0];
}else{
startDate = dateArr[0];
endDate = dateArr[1];
}
if(cids!=null){
if(cids!='All'){
channelids = "&channelid="+cids.join(",");
}
if(scope.selecteds != -1 && typeof(scope.selecteds) != "undefined"){
httpurl = "api/app/"+scope.selecteds+"/report/"+reportList+"?startdate="+startDate+"&enddate="+endDate+channelids;
$http.get(httpurl).success(function(data,status){
scope.tabTitle = data.name;
var tableList = services.colToRow(data.val),cidlen = cids.length;
scope.tabTotal = services.dataToTotal(data.val,cidlen);
var key = data.key,tabname = [],zero = [],tabListInfo = [],allnames = scope.spreadNames;
for(var i=0;i<scope.tabTotal.length;i++){
zero[i] = 0;
}
for(i=0;i<cidlen;i++){
var idx = $.inArray(allnames[i],key);
tabListInfo[i] = new Array();
if(idx>-1){
tabListInfo[i] = tableList[idx];
}else{
tabListInfo[i] = zero;
}
if(merger){
var temp = [];
for(var j=0;j<tabListInfo[i].length;j++){
temp[j] = tabListInfo[i][j];
}
temp.unshift(scope.spreadNames[i]);
tabListInfo[i] = temp;
}
}
var channelIdList = [];
if(key.length>0){
var n = 0;
for(var i in scope.spreadData){
for(var j in key){
if(key[j] == scope.spreadData[i].name){
n++;
channelIdList.push(scope.spreadData[i].channel);
if(n>20) break;
}
}
}
}
services.getChannelName(scope,channelIdList.join(","));
scope.tabname = scope.spreadNames;
if(merger){
var tabListObj = [];
if(reportList == "quality_report"){
for(var i = 0; i <tabListInfo.length; i++){
tabListObj.push({
"name" : tabListInfo[i][0],
"hitNum" : tabListInfo[i][1],
"reSchedulNum" : tabListInfo[i][2],
"activeDevice" : tabListInfo[i][3],
"activeRate" : tabListInfo[i][4],
"payment" : tabListInfo[i][5],
"spdID" : cids[i]
});
}
}
scope.tabListInfo = tabListObj;
}else{
if(reportList == "fakequality_report"){
var tabListObj = [];
for(var i = 0; i <tabListInfo.length; i++){
tabListObj.push({
"name" : scope.tabname[i],
"reSchedulNum" : tabListInfo[i][0],
"hitNum" : tabListInfo[i][1],
"errHitNum" : tabListInfo[i][2],
"errHitRate" : tabListInfo[i][3],
"activeDevice" : tabListInfo[i][4],
"errActDevice" : tabListInfo[i][5],
"errActRate" : tabListInfo[i][6],
"spdID" : cids[i]
});
}
scope.tabListInfo = tabListObj;
}else{
scope.tabListInfo = tabListInfo;
}
}
scope.spreadIDs = cids;
}).error(function(data){
services.loginTimeout(data);
});
}
}
};
答案 0 :(得分:2)
您永远不应该将$scope
对象传递给服务,服务应始终具有可重用的方法,该方法将被暴露。我建议你的服务方法应该向控制器调用方法返回promise,而调用方法将在控制器promise成功方法中实现绑定逻辑。
服务方法
services.getChannelName = function(channelidList) {
httpurl = "api/account/" + nowuID + "/channel/channellist?id=" + channelidList;
return $http.get(httpurl).success(function(data) {
return data;
}).error(function(err) {
return err;
});
};
控制器方法
$scope.getChannelName = function() {
$scope.spreadGroupData = [];
service.getChannelName(channelidList).then(function(data) {
if (data.length > 0) {
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
}, function(err) {
console.log("Error" + err);
})
}
<强>更新强>
关于代码的全部想法,如下所示。需要维护正确的代码堆栈解析。 第一个服务方法将返回promise,解析后你需要在一些范围变量中进行更改,然后你将调用第二个具有promise的服务方法,在解决它之后你需要更新范围。
<强>代码强>
services.getListData(flag).then(function(data) { //you may need to pass multiple parameter to this
//then do scope operation
service.getChannelName(channelidList).then(function(res) {
if (res.length > 0) {
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
}, function(err) {
console.log("Error" + err);
});
})
答案 1 :(得分:1)
我只看到一个可能导致问题的小事, httpurl 变量前面缺少 var 关键字,我只将其添加到下面的演示中
您需要显示数据的视图:
<body ng-controller="myController">
Spread Group Data
<br />
------------------------------------------------------------
<li ng-repeat="data in spreadGroupData"
ng-click="channelList(data.campaigns,data.name)">
<a href="javascript:void(0)">{{data.name}}</a>
</li>
</body>
我使用了一个模拟json提供来模拟你的服务并直接在控制器中调用它:
// Prepared a mock json array on the http://beta.json-generator.com and below url returns:
// [{"name":"Item 1","id":1},{"name":"Item 2","id":2},{"name":"Item 3","id":3},{"name":"Item 4","id":4}]
var httpurl = "http://beta.json-generator.com/api/json/get/LoUmNC4";
$http.get(httpurl).success(function(data) {
if (data.length > 0) {
$scope.spreadGroupData = [];
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
如果您的服务独立于您的控制器,那么您可以将$ scope传递给您的服务方法。但是在这个演示中,我直接在主控制器中实现了http调用块。除此之外,@ pankajparkar表示不要在工厂或服务无关服务中使用$ scope,并从类似服务中获取和使用响应数据。请检查 promise 和 $ q 以处理异步调用。
这是一个有效的演示:Demo
答案 2 :(得分:0)
放置$ scope.spreadGroupData = []; $ http以外的电话: -
services.getChannelName = function($scope,channelidList){
httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
$scope.spreadGroupData = [];
$http.get(httpurl).success(function(data){
if(data.length>0){
for(var i in data){
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
};