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>

OR

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

Answer 3

我使用自己的Angular指令自动用行链接包裹行中的每个单元格。

优点是：

您不会重复代码。
每个单元格中都有一个常规链接，因此“在新标签中打开”（中间按钮或CTRL +单击）等按预期工作（与ng-click版本相反）。

HTML用法：

<tr row-href="#/user/{{client.tagid}}">
    <td>...</td>
    <td>...</td>
</tr>

指令代码（在TypeSript中）：

export class RowHrefDirective implements ng.IDirective {

    constructor(private $compile: ng.ICompileService) {
    }

    restrict = "A";

    scope = {
        rowHref: "@rowHref"
    };

    link = (scope: Scope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void => {
        const cells = element.children("td[skip-href!='yes'],th[skip-href!='yes']");

        cells.addClass("cell-link");

        for (const cell of cells.toArray()) {
            const link = jQuery(`<a ng-href="{{ rowHref }}"></a>`);
            this.$compile(link)(scope);
            jQuery(cell).prepend(link);
        }
    }
}

必需的CSS代码（用链接填充整个单元格）：

td.cell-link,
th.cell-link {
    position: relative;
}

td.cell-link a,
th.cell-link a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Answer 4

这是一个CSS和HTML问题，并非特定于AngularJS。 <tr>唯一允许的子项是<td>，因此您需要将每个单元格的内容包装在一个锚点中。您还需要使锚点成为块元素，使其成为容器的整个高度/宽度：

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

Answer 5

<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 6

根据@sfs的要求，这是我们用于ui-sref的解决方案（Angular 1.5; TypeScript代码，对由此造成的不便表示道歉）。

致谢：该代码基于answer的精彩Martin Volek：

import { IDirective, IDirectiveFactory, ICompileService, forEach, element } from 'angular';

export default class RowUiSrefDirective implements IDirective {

  restrict = 'A';
  scope = { rowUiSref: '@rowUiSref' };

  constructor(private $compile: ICompileService) { }

  link = (scope, elm, attrs) => {
    if (elm[0].tagName !== 'TR') {
      throw new Error('This directive should only be used in <tr> elements.');
    }

    forEach(elm.children(), (cell) => {

      if (cell.attributes['skip-href'] && cell.attributes['skip-href'].value !== 'false') {
        return;
      }

      cell.className += ' cell-link';
      let link = element('<a ui-sref="{{rowUiSref}}"></a>');
      this.$compile(link)(scope);
      element(cell).prepend(link);
    });
  };

  static factory(): IDirectiveFactory {
    let directive = ($compile: ICompileService) => new RowUiSrefDirective($compile);
    directive.$inject = ['$compile'];
    return directive;
  };

}

指令初始化：

import { module } from 'angular';
import RowUiSrefDirective from './rowUiSref';

module('app').directive('rowUiSref', RowUiSrefDirective.factory());

使用示例：

<table>
  <tr ng-repeat="item in itemController.items"
      row-ui-sref="state.item({itemId: '{{item.id}}'})">
    <td>{{item.name}}</td>
    <td>{{item.label}}</td>
  </tr>
</table>

Answer 7

一个丑陋的解决方案是只有一个包含链接的表格单元格，然后在其中添加另一个包含表格行和其他单元格的表格。所以它看起来像;

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

我不同意使用表格进行布局！

但是，您正在使用JavaScript和angularjs，因此您可以将click事件添加到表行，这样就可以通过window.location将用户发送到URL。例如

<tr ng-repeat="client in clients" ng-click="ChangeLocation([yoururl])">    
    <td>{{client.firstname}}</td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>    
</tr>

然后在$scope内设置一个函数来处理这个问题;

$scope.ChangeLocation = function(url){
    window.location = url;
}

Answer 8

试试这个......

HTML ---＆gt;

<ul ng-repeat ="item in itemList "> <li><a data-ng-href="{{getUrl(item)}}">{{item.Name}}</a></li> </ul>

JS ---＆gt;

$scope.getUrl = function (item) { return '/<give your path here>/' + item.ID; };

Answer 9

我改编了 Martin Volek 的 Typescript 代码来制作 AngularJS 1.x 指令：

app.directive('rowHref', function ($compile)
{
  return {
    restrict: 'A',
    link: function (scope, element, attr)
    {
      scope.rowHref=attr.rowHref;
      var cells = element.children("td");
      angular.forEach(cells, function (cell)
      {
        $(cell).addClass("cell-link");
        var newElem = angular.element('<a ng-href="{{ rowHref }}"></a>');
        $compile(newElem)(scope);
        $(cell).append(newElem);
      });
    }
  }
});

添加他相同的 HTML 和 CSS

在元素中设置ng-href

9 个答案: