Access the element inner html and attribute values inside controller function

Question

Html content as,

<div ng-controller="logCtrl">
  <ul>
    <li ng-click="logMe" someAttr="hello ricky">hello martin</li>
  </ul>
</div>

Javascript content as,

var app = angular.module('app',  []);
app.controller('logCtrl',  function ($scope, $element) {
  $scope.logMe = function(){
    console.log("html content is " + /*---- how can i print $element's inner html text here --- */)
    console.log("attribute value is " + /*---- how can i read the li element's someAttr value here --- */)
  }
})

This must print this message in the console (when user clicks the mouse),

html content is hello martin
attribute value is hello ricky

you can use jQuery to do that.. <li ng-click="logMe" someAttr="hello ricky" id="test">hello martin</li> $('#test').html() and $('#test').attr('someAttr'); — Shubham Nigam
– Shubham Nigam, Commented Jun 20, 2015 at 7:17

Anik Islam Abhi · Accepted Answer · 2015-06-20 07:18:20Z

2

Try like this

HTML

 <li ng-click="logMe($event)" someAttr="hello ricky">hello martin</li>

Controller

$scope.logMe = function(e){
    var value=e.target.attributes.someAttr.value;
}

answered Jun 20, 2015 at 7:18

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

Collectives™ on Stack Overflow

Access the element inner html and attribute values inside controller function

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