将元素内的HTML DOM作为字符串传递给AngularJS控制器

Question

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.

Answer 1

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