AngularJS转换链接到链接标签

我有一个关于AngularJS并解释我的问题是由下面的例子中唯一办法一个简单的问题：AngularJS转换链接到链接标签

我有一个控制器和控制器中我有对象的列表。每个对象都有一个实际链接到另一个页面的属性。但是，使用ng-repeat时，可以使用以下结构，以便链接可以转换为标签？

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

具有相同含义的另一个问题是：例如，如果该对象containes，我谨代表作为表我怎么能做到这一点的属性？换句话说：

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

我知道，如果我用NG-重复ABD {{object.info}}它woud给我的字符串，它不会将其转换为一个HMTL标签。但是，我想将其转换为HTML标记。我知道模板用于这个，但我不知道如何在对象中使用模板。

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

来源

2015-10-04 Muninmuni

'ng-bind-html' with'$ sce.trustedAsHtml' will do the trick http://stackoverflow.com/a/32269118/2435473 –

@Polly你也可以使用你的html作为模板指令。这是使用'$ compile'服务来动态编译html。但根据你的用例，Pankaj Parkar说ng-bind-html可能会更好。 https://docs.angularjs.org/api/ng/service/$compile – ste2425

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

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

ngHref将等待，直到它的所有数据将最终HREF的标签，防止陌生边缘的情况下，人们点击链接之前就准备好了。这通常不是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时，您不仅可以读取模板并查看结果，那么只有在内容真正未知时（例如从后端发送）才能使用该解决方案，这样更容易且更具可读性。如果你知道它应该有的结构，把它写在模板中。

来源

2015-10-04 21:14:50

AngularJS转换链接到链接标签

回答

相关问题