CODEWITHSUNDEEP
javascripthtmlangularjsdomangularjs-scope
Dinesh Devkota
Dinesh Devkota

Reputation: 1417

Passing Html DOM inside an element as an string to AngularJS controller

I wanted to grab the Html DOM inside an element as an string to angular controller. I didn't find good resource online. I have following Html Code: 

 <div class="form-group ng-controller="straightRunningBeltsCtrl"">
         <button class="btn btn-success btn-lg" ng-click="post()">Get Service Factor</button>

           <div id="pop-up"><h1>My content here!!</h1></div>
      </div>

And I have following JS code

angular.module('straightRunningBelts', [ ])
.controller('straightRunningBeltsCtrl', straightRunningBeltsCtrl)

function straightRunningBeltsCtrl($stateParams, $scope, $http,  $sce){
 $scope.post= function () {
 var template=$sce.trustAsHtml(angular.element(document.getElementById('pop-up')));//Results an error( $sce.trustAsHtml needs string input)
    }

Variable template needs to get value from DOM. Right now, angular.element(document.getElementById('pop-up') returns object. I wanted to do sometime like JQuery Does by using html() function here. Any help or reference to it is welcomed.

Upvotes: 1

Views: 1746

Answers (1)

Mike Vranckx
Mike Vranckx

Reputation: 5577

To retrieve the HTML inside your DOM element, you can use innerHTML. In your case it would be

document.getElementById('pop-up').innerHTML

Working Plunkr

Upvotes: 1

Related Questions