如何使表中的整个行像ngtable（angularjs）中的超链接（在新标签中打开等）

Question

我在ngtable中使用AngularJS。

每次创建表时，我都将ui-sref放在这样的<tr>元素上：

<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
  <td>{{element.name}}</td>
  <td>{{element.info}}</td>
</tr>

但是，这不允许用户在新选项卡中打开条目，右键单击它以在新窗口中打开，依此类推（它不像<a>一样]

有什么方法可以使整个行都可单击，并可以选择在新标签页/窗口中打开（就像在这种情况下一样）

Answer 1

您可以使用$state.href和window.open函数进行操作。

还使用变量来控制是否使用新标签：

// <tr ng-repeat="element in $data" ng-click="navigateTo(element.id, false)"> -- Same Tab
<tr ng-repeat="element in $data" ng-click="navigateTo(element.id, true)">
  <td>{{element.name}}</td>
  <td>{{element.info}}</td>
</tr>

...

//In the controller
$scope.navigateTo = function(id, inNewTab){
  if(inNewTab){ // New tab
     var url = $state.href('app.some.details.info', {id: id});
     window.open(url , "_blank")
  } else { // Same tab
     $state.go('app.some.details.info', {id: id});
  }
}

Answer 2

哟！如果您希望行内容像<a />元素一样工作，则可以用锚点包装<td>内容。像这样的东西：

<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
  <td>
    <a href="#" title="...">{{element.name}}</a>
  </td>
  <td>
    <a href="#" title="...">{{element.info}}</a>
  </td>
</tr>

您还可以创建一些自定义JavaScript，以重新创建<a />行为。为每个表行创建单击侦听器，然后使用window.location.href = ...。