добавить html в div с угловым js

Question

Как я могу передать html через контроллер angulrjs?

вот мой 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);, в этом DIV я должен добавить 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> 
  

и контроллер будет выглядеть так:

$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(); 
       } 
      }); 
}; 

ваш сниппет не показаны элементы, которые вы используете:

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

и обратите внимание, что мы добавляем данные, используя summaryBinding

надеюсь, что это поможет :)