添加html到帶角js的div

Question

我如何在angulrjs的控制器中傳遞html？

這裏是我的list.html：

<div class="col-xs-3" ng-repeat="item in companyData"> 
    <a ng-click="getPackageInfo({{item.iCompanyID}},'{{item.vCompanyName}}')" class="block panel padder-v bg-primary item"> 
     <span class="text-white block">{{item.vCompanyName}}</span> 
    </a> 

    <div id="packagehtml"></div> 
</div> 
<div id="lp" class="col-md-12 listing-div hidden"></div> 

在controller.js：

$scope.pData = []; 
    $scope.getPackageInfo = function(id,name) { 
     $scope.name = name; 
     var summery = SubscriptionoptioncompanylistFactory.getSummary(id); 
     document.getElementById("lp").classList.remove("hidden"); 
     $('.packages-data').html(''); 
     $('#loading').show(); 
     SubscriptionoptioncompanylistFactory.getPackageInDetail(id). 
     success(function(data) { 
      if(data != 0) { 
       $("#lp").html(summery); // this is used to append the data 
       document.getElementById("np").classList.add("hidden"); 
       Array.prototype.push.apply($scope.pData, data); 
       $('#loading').hide(); 
      } else { 
       document.getElementById("lp").classList.add("hidden"); 
       document.getElementById("np").classList.remove("hidden"); 
       $('#loading').hide(); 
      } 
     }); 
    }; 

在這裏，我已經寫了$("#lp").html(summery);，在該專區我不得不追加HTML中來自var summery = SubscriptionoptioncompanylistFactory.getSummary(id);。但是這不會附加數據。在控制檯我可以看到數據來自summary變量。我能怎麼做？

Answer 1

看看下面的修改

• 使用角ng-show用於顯示/隱藏元件

• 使用數據綁定和避免Jquery的像DOM操作

  <div class="col-xs-3" ng-repeat="item in companyData"> 
      <a ng-click="getPackageInfo({{item.iCompanyID}},'{{item.vCompanyName}}')" class="block panel padder-v bg-primary item"> 
       <span class="text-white block">{{item.vCompanyName}}</span> 
      </a> 
  
      <div id="packagehtml"></div> 
  </div> 
  <div id="lp" ng-show="lbVisible" class="col-md-12 listing-div hidden">{{summaryBinding}}</div> 
  

和控制器看起來像：

np, #loading so just find them and add the `ng-show` with the proper scope variable : `npVisible , lbVisible , loadingVisible` 

，並請注意，我們添加使用summaryBinding

數據：

您使用

$scope.pData = []; 
$scope.getPackageInfo = function (id, name) { 
    $scope.name = name; 
    var summery = SubscriptionoptioncompanylistFactory.getSummary(id); 

    $scope.lbVisible = true; //document.getElementById("lp").classList.remove("hidden"); 

    $('.packages-data').html(''); 

    $scope.loadingVisible = true; //$('#loading').show(); 

    SubscriptionoptioncompanylistFactory.getPackageInDetail(id). 
      success(function (data) { 
       if (data != 0) { 

        $scope.summaryBinding = summery; // $("#lp").html(summery); // this is used to append the data 


        $scope.npVisible = false; // document.getElementById("np").classList.add("hidden"); 

        Array.prototype.push.apply($scope.pData, data); 
        $scope.loadingVisible = false; // $('#loading').hide(); 
       } else { 
        $scope.lbVisible = false; //document.getElementById("lp").classList.add("hidden"); 
        $scope.npVisible = false; //document.getElementById("np").classList.remove("hidden"); 

        $scope.loadingVisible = false; // $('#loading').hide(); 
       } 
      }); 
}; 

您的代碼段沒有顯示元素

希望這有助於:)