Inner-directive communication on all repeated instances of a directive - angularjs

Question

I am attempting to set up a simple highlighting mechanism in a data table:
<table>
<thead>
<tr>
<th>Name</th>
<th>Owner</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in files" highlightable> <!-- Multiple instances of highlightable -->
<td>{{file.name}}</td>
<td>{{file.owner}}</td>
</tr>
</tbody>
</table>
And I have a directive that handles the highlighting. You click on the <tr> and it will attempt to first un-highlight all other <tr>'s and then highlight the one clicked.
directive('highlightable', function() {
return {
require: 'highlightable',
controller: function($scope, $element) {
this.unhighlight = function(file) {
$element[0].style.backgroundColor = 'transparent';
};
},
link: function(scope, element, attrs, ctrl) {
var color = '#DEE4FC';
element.bind('click', function(e) {
ctrl.unhighlight(scope.file);
element[0].style.backgroundColor = color;
});
}
};
});
Problem is though that it doesn't seem to be accessing every instance of the directives' controllers. When requiring another directive, how can I ensure that I am requiring every instance of that directive in an ng-repeat scenario, and manipulating each instance via each repeated directive's controller methods?
http://jsfiddle.net/txBJ6/1/

Answer 1

Given what you're trying to achieve, I would do this. Basically use scope notification to communicate among the elements.
directive('highlightable', function() {
return {
link: function(scope, element, attrs) {
var color = '#DEE4FC';
scope.$on("reset", function() {
element[0].style.backgroundColor = 'transparent';
});
element.bind('click', function(e) {
scope.$parent.$broadcast("reset");
element[0].style.backgroundColor = color;
});
}
};
});
Demo: link
Updated
sze correctly points out that my solution is only suitable if you need exactly one list (which appears to be the case from your question). However, it's very easy to accommodate multiple lists while still maintaining the code conciseness.
<tr ng-repeat="file in files" highlightable="list1">
<td>{{file.name}}</td>
<td>{{file.owner}}</td>
</tr>
...
<tr ng-repeat="file in files" highlightable="list2">
<td>{{file.name}}</td>
<td>{{file.owner}}</td>
</tr>
...
directive('highlightable', function () {
return {
link: function (scope, element, attrs) {
var color = '#DEE4FC';
scope.$on(attrs.highlightable, function () {
element[0].style.backgroundColor = 'transparent';
});
element.bind('click', function (e) {
scope.$parent.$broadcast(attrs.highlightable);
element[0].style.backgroundColor = color;
});
}
};
});
Demo: link

Answer 2

The problem of [#buu Nyuyen]'s apporach is he missed some logic to deal with the scope. If you have another list modified by the directive highlightable, the second list will be impacted if the event is broadcasted from the first list and make the directive not reusable. You can see this issue here. Issue
However, you can easily achieve it by looping through other elements. The trick is you can get all repeated elements with element[0].parentElement.children.
directive('highlightable', function () {
return {
require: 'highlightable',
controller: function ($scope, $element) {
this.unhighlight = function (element) {
element.style.backgroundColor = 'transparent';
};
},
link: function (scope, element, attrs, ctrl) {
var color = '#DEE4FC';
element.bind('click', function (e) {
angular.forEach(element[0].parentElement.children, function (element) {
ctrl.unhighlight(element);
})
element[0].style.backgroundColor = color;
});
}
};
});
Working Demo

Answer 3

The easiest solution is the one proposed by Buu Nguyen, I offer a more difficult one.
One of the typical ways to resolve this is to have a parent directive which will have knowledge of every children. So you can register there every row and when you click on one, the parent will unhighlight the other children.
Is more complicated but more configurable. You can create an attribute called... multi to be able to highlight more than one. Or even be able to select a max of x rows... What you want.
If you're curious, I leave you the demo here: http://jsfiddle.net/5NSW3/1/