如何在 <td> 元素中使用 ng-href 进行超链接？答案

【问题标题】：How do I hyperlink with ng-href in <td> elements?如何在 <td> 元素中使用 ng-href 进行超链接？
【发布时间】：2018-07-02 20:49:02
【问题描述】：

我有一个表格，对于其中的一列，我正在尝试使用一个单词来超链接一个 url，例如“这里”。但是，该列显示为空白（以及在 intelliJ 上收到“不允许属性 ng-href”警告。这就是表格的样子，最后一行是我尝试超链接：

<tr>
<td ng-bind="order.paid | date:'short'"></td>
<td ng-bind="order.totalQty"></td>
<td ng-bind="order.total.pretty" ng-if="!store.shopifyInstalled"></td>
<td><a ng-href="order.shopifyReceiptUrl" ng-bind="Here" ng-if="store.shopifyInstalled"></a></td>
</tr>

我做错了什么？

【问题讨论】：

链接标签在<a>标签之后和</a>之前
ng-bind="Here" 正在寻找范围属性 $scope.Here。可以将其引用为字符串ng-bind="'Here'"，但更容易将其添加为文本

标签： javascript html angularjs hyperlink

【解决方案1】：

使用花括号 {{}} 放置您的模型并删除 ng-bind 指令。

<tr>
<td ng-bind="order.paid | date:'short'"></td>
<td ng-bind="order.totalQty"></td>
<td ng-bind="order.total.pretty" ng-if="!store.shopifyInstalled"></td>
<td><a ng-href="{{order.shopifyReceiptUrl}}" ng-if="store.shopifyInstalled">Here</a></td>
</tr>

【讨论】：

【解决方案2】：

可以通过两种方式完成：

首先用 ng-init 定义一个 var：

<td><a ng-href="order.shopifyReceiptUrl" ng-bind="var_name" ng-init="var_name='Here'" ng-if="store.shopifyInstalled"></a></td>

第二次使用自定义文本：

<td><a ng-href="order.shopifyReceiptUrl" ng-if="store.shopifyInstalled">HERE</a></td>

【讨论】：