在<tr>元素中设置ng-href

Question

以下代码使client.name成为客户端中每个客户端上的锚点.我感兴趣的是将整个<tr>元素作为该链接.ng-href不能在<tr>元素上工作..我能做什么才能使整个行实例化的单个链接ng-href？

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

我想要做的就是这样......当然这不起作用..

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

要么

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

Answer 1

你可以使用ng-click(而不是onClick),正如Jason所建议的那样.

就像是:

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>

调节器

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

和样式使它显示为一个可点击的元素(不会在IE7中工作)

CSS

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

Answer 2

我写了一个指令,你可以简单地写:

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

来源:

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();
      });
    }
  }
}]);