angularjs - Access Single Child Controller From Repeat? -

angularjs - Access Single Child Controller From Repeat? -

the best way explain example:

<table ng-controller="groupofpeoplecontroller"> <tr ng-repeat "person in peoples"> <td>{{person.name}}</td> <td><button ng-click="load_data(person.id)">load data</button> <td><div class="persondata" ng-controller="persondatacontroller"></div></td> </tr> </table>

what i'm looking populate div.persondata it's own data. have function in groupofpeoplecontroller called load_data(id):

// groupofpeoplecontroller $scope.load_data = function(id){ $rootscope.$broadcast('load_data'id); }

that pass kid element controller persondata.

// persondatacontroller $scope.$on('load_data',function(e,id){ // impact div within current loop... });

the problem is, attached every loop of persondata. click on 1 person, affects every row, seeing attached same controller.

how go making separate instances of persondata? broadcast wrong way go this?

do not broadcast $rootscope, dispatches event name downwards kid scopes (and children recursively).

what do, broadcast from current scope, rather scopes. see plunker.

the main trick need kid scope ng-repeat creates, pass keyword "this" function gets current scope, there broadcast event.

element:

<button ng-click="load_data(this, person.id)">load data</button>

groupofpeoplecontroller:

$scope.load_data = function(childscope, id){ childscope.$broadcast('load_data', id); }

however, recommend against method. why have broadcasts/$on's @ all? move persondatacontroller entire contents of tr, , have loaddata function called straight ng-click in this plunker. it's save headaches , bugs.

angularjs