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

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.

@Vanojx1 that results into "Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element" error — Dinesh Devkota
– Dinesh Devkota, Commented Jul 16, 2015 at 14:39
seems that angular.element support the html() function look here at docs.angularjs.org/api/ng/function/angular.element — Vanojx1
– Vanojx1, Commented Jul 16, 2015 at 14:46

Pankaj Parkar · Accepted Answer · 2015-07-16 14:50:29Z

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

edited Jul 16, 2015 at 14:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Jul 16, 2015 at 14:40

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

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

4 Comments

Dinesh Devkota Over a year ago

it results into "Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html"!

Pankaj Parkar Over a year ago

@DineshDevkota Its working here plnkr.co/edit/XWftIro8DyWnaD0CMwWO?p=preview

Dinesh Devkota Over a year ago

Try alerting the template or try checking its value. It is undefined.

Dinesh Devkota Over a year ago

Okay, just plain JS worked. I was not thinking straight. Removed $sce.trustAsHtml(angular.element(document.getElementById('pop-up'))) and replaced with document.getElementById('pop-up').innerHTML

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related