Question

我对AngularJS有一个简单的问题，解释我的问题的唯一方法是通过以下示例：

我有一个控制器，在控制器内部我有一个对象列表。每个对象都有一个属性，该属性实际上链接到另一个页面。但是，使用ng-repeat时可以使用以下结构，以便可以将链接转换为标记吗？

<a href="{{object.linkProperty}}"> {{object.name}} <</a>

具有相同含义的另一个问题如下：例如，如果对象包含我想表示为表的属性，我该怎么做？换句话说：

listOfObjects = [
    { name: "bla"
      info: "<table> some data </table>"
    }
    { name: "blaTwo"
      info: "<table> some data </table>"
    }
]

我知道如果我使用ng-repeat abd {{object.info}}它会给我字符串，它不会将其转换为hmtl标记。但是，我想将其转换为HTML标记。我知道模板用于此，但我不确定如何在对象中使用模板。

非常感谢您提前提供的任何帮助！ =）

Answer 1

对于第一个问题，是的，但您应该使用ng-href。

<a ng-href="{{object.linkProperty}}"> {{object.name}} </a>

在将最终的href添加到标记之前，

ngHref将等到它拥有所有数据，从而防止人们在准备好之前单击链接的奇怪边缘情况。这通常不是hrefs的问题（但仍然是最佳实践），但类似的ng-src图像非常有用，可以在角度插入正确的src之前阻止损坏的图像闪烁。

对于sectond问题，您可以使用ng-bind-html和$ sce.trustedAsHtml作为评论提到的内容，或者您可以在重复内部模板化。

<table>
    <tr ng-repeat="object in listOfObjects">
        <td>{{object.name}}</td>
        <td>{{object.moreProperties}}</td>
    </tr>
</table>

我想说大多数时候这是更好的方式。它更容易，更易读，当使用ng-bind-html时，你不能只读取你的模板并看看结果是什么，所以只有当内容真正未知时才使用该解决方案（例如从后端发送）。如果您知道它应该具有的结构，请将其写在模板中。

AngularJS将链接转换为链接标记

1 个答案: