为什么数据无法在视图中显示?

时间:2015-03-30 07:24:29

标签: javascript angularjs

这是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);
                });
                }
            }
    };

3 个答案:

答案 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);
                }
            }
        });
    };