Why does innerHTML returns undefined in angularjs

Question

innerHTML returning undefined when <p></p> tag is clicked, but i am expecting its inside html. Any guess why?

http://plnkr.co/edit/NOLTO95H5GDuG35X9NOA?p=preview

Answer 1

Because Angular passes $scope objects, not the DOM elements. Since $scope object doesn't have the innerHtml, you are getting undefined.

You can assign a model to either an input or a textarea, then pass this model to your function instead. Here is a plunker: http://plnkr.co/edit/VjFXacXJMa0PpS364wOb Or, if you want to stick with playing with DOM from controller which is against the nature of Angular, you can use $event.target.

Answer 2

You can pass angular's $event

<p ng-click="abc($event)">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, nemo, numquam, incidunt similique quisquam dolor blanditiis quis veniam at laudantium quibusdam beatae ad ea voluptates impedit molestiae cum modi quam!
</p>

and get the innerHtml

$scope.abc = function(e) {
    alert(e.target.innerHTML);
}

Plunker

Answer 3

You need $event.target or $event.currentTarget.

I would you should use $event.currentTarget, beacuse it will give you more precise element where you clicked.

CODE

$scope.abc = function($event){
  //more precise element tracking will track sub element too using $event.currentTarget
  alert( $event.currentTarget.innerHTML || $event.srcElement.innerHTML); 
  alert($event.target.innerHTML); //element tracking
}

Working Plunkr

Refer this answer for more info.

Answer 4

instead of this you can pass $event and get $event.target which is the clicked dom element

  $scope.abc = function($event){
    alert($event.target.innerHTML);
  }