AngularJS get parsed HTML

Question

In the below code, I am having a template and based on the IsEdit flag the corresponding view will be rendered. From here, Is there a way to get the angular parsed HTML which is only visible to the view.

e.g.

If IsEdit = false, then I want the rendered HTML as

<div>
   View Mode
</div>

or even

<div ng-show="!IsEdit">
   View Mode
</div>

var app = angular.module("myApp", []);

app.controller("myCtrl", function ($scope) {

  $scope.IsEdit = false;

  $scope.GetTemplate = function () {
    console.log($("#Template").html());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div id="Template" ng-app="myApp" ng-controller="myCtrl">

<div ng-show="IsEdit">
  Edit Mode
</div>
<div ng-show="!IsEdit">
  View Mode
</div>

<button ng-click="GetTemplate()">Get HTML</button>
</div>

John Velasquez · Accepted Answer · 2019-06-03 10:13:23Z

1

Try this one, we use ng-if to completely removed it in the DOM.

var app = angular.module("myApp", []);

app.controller("myCtrl", function ($scope) {

  $scope.IsEdit = false;

  $scope.GetTemplate = function () {
    angular.element('#Template').contents().filter(function(){ return this.nodeType == 8;}).remove(); // <--- to remove comments
    console.log(angular.element('#Template').html());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div id="Template" ng-app="myApp" ng-controller="myCtrl">

<div ng-if="IsEdit">
  Edit Mode
</div>
<div ng-if="!IsEdit">
  View Mode
</div>

<button ng-click="GetTemplate()">Get HTML</button>
</div>

answered Jun 3, 2019 at 10:13

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

AngularJS get parsed HTML

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