Check out this directive:
app.directive('changeImage', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
alert('here');
$(element).hover(function() {
// on mouseenter
$(element).tooltip('show');
$("#test").addClass('panel');
}, function() {
// on mouseleave
$(element).tooltip('hide');
$("#test").removeClass('panel');
});
}
};
});
Whenever a user hovers over a table row, this should trigger. You can find the code for the table row below:
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2">
<span></span>
</th>
<th class="col-xs-8" ng-click="sort('firstName')">
<span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th class="col-xs-2">
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-click="showModal($event, user.emailAddress)" changeImage="{imageId: {{$index}}, colour: blue" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>
<img class="round" src={{user.profileImageUrl}} width="50" height="50"></img>
</td>
<td>
<div style="padding-top:1em"><span>{{user.firstName}}</span>
<br>{{user.lastName}}
<br>{{user.profession}}</div>
</td>
<td>
<div style="padding-top:1em">
<img id={{$index}} src="images/arrow-right-pink.png" width="50" height="50"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I usually have no issues with my directives working properly. I'm unsure why this specific one is not functioning as expected even though it's attached to the table row.