AngularJS - How to get innerHTML of rendered DOM element

Question

Is there any way to get innerHTML code of rendered element that includes ng-repeat loop?

For example:

<div id="container">
    <div ng-repeat="e in ctrl.elements>{{e.name}}</div>
</div>

you probably want to look at transclusion functions docs.angularjs.org/api/ng/service/… — Panos K
– Panos K, Commented Oct 10, 2018 at 12:18

barbsan · Accepted Answer · 2018-10-10 12:24:32Z

2

You can use $document[0].getElementById("container").innerHTML.
Remember to call it after ng-repeat's job is done - I've delayed it in snippet below.

angular.module('app', [])
  .controller('ExampleController',  function($scope, $document, $timeout) {
    $scope.ctrlelements = [{name: "aaaa"}, {name: "bbbb"}];
    
    console.log($document[0].getElementById("container").innerHTML)
    
    $timeout(function(){
      console.log($document[0].getElementById("container").innerHTML)
    }, 1000)
    });

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="ExampleController">
    <div id="container">
    <p ng-repeat="e in ctrlelements track by $index">{{e.name}}</p>
  </div>
  
</div>
</body>

PS. There may be some better way to solve your problem than dealing with innerHTML

answered Oct 10, 2018 at 12:24

barbsan

3,46811 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - How to get innerHTML of rendered DOM element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related