angularjs - 在元素中设置 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>

score 32 · Accepted Answer

您也可以按照 Jason 的建议使用ng-click（而不是 onClick）。

就像是：

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;
}

score 11 · Accepted Answer

我写了一个指令，这样你就可以简单地写：

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

score 4 · Accepted Answer

我使用我自己的 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%;
    }
}

score 3 · Accepted Answer

这是一个 CSS 和 HTML 问题，并非特定于 AngularJS。a 唯一允许的孩子<tr>是 a <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>

score 1 · Accepted Answer

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

这是对所提供的可能起作用的选项的参考。我认为这将整行与行中的每个字段绑定在一起。但不可点击。怎么做。我的意思是我们应该能够单击以便可以打开另一个视图/模块。

score 1 · Accepted Answer

根据@sfs 的要求，这是我们正在使用的解决方案ui-sref（Angular 1.5；TypeScript 代码，对任何不便表示歉意）。

学分：代码基于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>

score 0 · Accepted Answer

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

<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，因此您最好将点击事件添加到表格行，通过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;
}

score 0 · Accepted Answer

试试这个...

HTML --->

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

JS--->

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

score 0 · Accepted Answer

我改编了 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

angularjs - 在元素中设置 ng-href

9 回答 9

Related

Reference