Get binding value of element in angular

Question

say I have this div in a ng-repeat clause:

<div ng-repeat="item in list" class="myDiv" ng-click="doStuff(item)">
    {{item.title}}
</div>

And it's based on this model:

$scope.list = [
    { 'title': 'Item 1', 'someData': 'lalala' },
    { 'title': 'Item 2', 'someData': '666' },
    { 'title': 'Item 3', 'someData': 'qwerty' }
  ];

Then I would end up getting 3 repeated divs.
Now I have an external script analyzing the page and I want to extract the data of the elements.
So for example if I select the first div var div1 = $('div.myDiv:first') I can get the attributes ng-click and ng-repeat from it. I can also use angular.element(div1).data('$binding') to get the binding {{item.title}}.
But what I really want is the individual item data of this particular div: i.e. I want to write a function getItemData(element) that will get div1 and return { 'title': 'Item 1', 'someData': 'lalala' }.

How can this be done?
Please note that I need a solution that would work both with repeater binding and with regular binding. I basically need to know the actual data that is bound to each element.

With an external script analyzing the page how can only get what you find in the page. So 'someDate' would not be available if not contained in the page, like in your example. Jquery should do the job. — dec
– dec, Commented Apr 5, 2015 at 7:18

dfsq · Accepted Answer · 2015-04-05 07:20:21Z

10

You can access element data object using angular.element.scope method:

var div1 = $('div.myDiv:first');
var dataItem = angular.element(div1).scope().item;

Demo: http://plnkr.co/edit/MzQRjdgqIpbe9LGrwMDZ?p=preview

edited Apr 5, 2015 at 7:20

answered Apr 5, 2015 at 7:14

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

5 Comments

dec Over a year ago

I think the external script can not access the scope. Instead he has to parse the page with jquery and get the values.

dfsq Over a year ago

@dec Yes, it can of course. You can access pretty much everything from outside: scope, services, injector, controllers, etc.

dec Over a year ago

I think he thinks of another webpage or am I wrong?

dfsq Over a year ago

@dec I think that by external script OP means something like user script or extension running on the same page, just outside of the app. "for example if I select the first div var div1 = $('div.myDiv:first')" which means that the script works on the same page.

Malki Over a year ago

Yes, that's exactly what I meant. Thanks!

Collectives™ on Stack Overflow

Get binding value of element in angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related