setting ng-href in <tr> elements

I wrote a directive so that you can simply write:

<tr ng-repeat="client in clients" such-href="#/user/{{client.tagid}}">

The source:

app.directive('suchHref', ['$location', function ($location) {
  return{
    restrict: 'A',
    link: function (scope, element, attr) {
      element.attr('style', 'cursor:pointer');
      element.on('click', function(){
        $location.url(attr.suchHref)
        scope.$apply();
      });
    }
  }
}]);

You can use an ng-click (instead of onClick) as Jason suggests as well.

Something like:

HTML

<tr ng-repeat="client in clients" ng-click="showClient(client)">
    <td><a ng-href="#/user/{{client.tagid}}">{{client.firstname}}</a></td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>
</tr>

Controller

$scope.showClient = function(client) {
  $location.path('#/user/' + client.tagid);
};

And styling to make it show as an clickable element (wont work in IE7)

CSS

tr {
  cursor: pointer;
}
// or
[ng-click] {
  cursor: pointer;
}

Tags:

Angularjs