angularjs - 如何在AngularJS中实现链接预览

标签 angularjs hyperlink

AngularJS中有没有指令可以实现AngularJS中的链接预览。我需要在我的网站中共享链接时显示链接预览,类似于 google plus。

有一些指令https://github.com/LeonardoCardoso/Link-Preview 。但它使用的是php。我需要没有 php。

最佳答案

如果您将 Angular 与 Material 设计结合使用,则可以使用以下内容:

https://github.com/angular-material-extensions/link-preview

否则您始终可以使用以下方式手动执行此操作:免费链接预览服务

http://linkpreview.net 是一项免费的 REST API 服务,它接受任何 URL 作为输入,并发送回带有标题、描述和缩略图的 JSON 响应。

您所需要做的就是向他们的 API 发送一个请求,其中包含必须生成链接预览的 URL。

这是一个示例请求 (GET)

http://api.linkpreview.net/?key=123456&q=https://www.google.com

回应:

{
"title": "Google",
"description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
"image": "http://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
"url": "https://www.google.com/"
}

您可以解析响应并设置其样式。

关于angularjs - 如何在AngularJS中实现链接预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40621266/

相关文章:

php - 使用 php 在文本字符串中创建 url

angularjs - AngularJS-格式文本从JSON返回到标题大小写

javascript - 等到scrollTo完成后再运行命令

asp.net - Asp.Net Core WebAPI 中的 IFormFile 始终为空

html - 超链接的异常行为

android - 基本内部链接在 Honeycomb 应用程序中不起作用?

AngularJS 仅在父 Controller 完成异步调用时加载 Controller

javascript - 带有动态单选按钮的必需属性(ng-repeat)

html - CSS:跳过部分链接中的下划线

jquery - 链接样式 css 异常? CSS 还是 jQuery?