首页 > 代码库 > angular-ngSanitize模块-linky过滤器详解
angular-ngSanitize模块-linky过滤器详解
本篇主要讲解angular中的linky这个过滤器.此过滤器依赖于ngSanitize模块.
linky能找出文本中的链接,然后把它转换成html链接.什么意思,就是说,一段文本里有一个链接,但是这个链接没有被a标签嵌套,linky能把它找出来,然后给它加上a标签并且给a链接添加正确的href属性,还可以设置打开的方式(_blank,_self,等...).
它查找链接是根据这些关键词来的: http/https/ftp/mailto/,或者就直接是一个email地址.
下面来看栗子:
html:
<!DOCTYPE html><html ng-app="myApp"><head> <title></title> <meta charset="utf-8"> <script src="../angular-1.3.2.js"></script> <script src="angular-sanitize.min.js"></script> <script src="script.js"></script> <link type="text/css" href="../bootstrap.css" rel="stylesheet" /></head><body><div class="container"> <table class="table table-bordered" ng-controller="ctrlLinky"> <caption>通过ngSanitize模块的linky过滤器编译链接</caption> <thead> <tr> <th>过滤方式</th> <th>指令的写法</th> <th>解析结果</th> </tr> </thead> <tbody> <tr> <td>使用linky编译链接</td> <td><pre><div ng-bind-html="myHtml | linky"><br></div></pre></td> <td><div ng-bind-html="myHtml | linky"></div></td> </tr> <tr> <td>使用linky+target编译链接</td> <td><pre><div ng-bind-html="myHtml | linky:‘_blank‘"><br></div></pre></td> <td><div ng-bind-html="myHtml | linky:‘_blank‘"></div></td> </tr> <tr> <td>不编译链接</td> <td><pre><div ng-bind-html="myHtml"><br></div></pre></td> <td><div ng-bind-html="myHtml"></div></td> </tr> </tbody> </table> <a class="btn btn-default" href="http://plnkr.co/edit/I9j13MnyuDwOJPnBiKE1?p=preview" role="button">plunker</a></div></body></html>
js:
var app =angular.module(‘myApp‘,[‘ngSanitize‘]);app.controller(‘ctrlLinky‘,function($scope,$sce){ $scope.myHtml = ‘<p>‘+ ‘下面这些都应该是链接:\n‘+ ‘http://angularjs.org/,\n‘+ ‘mailto:us@somewhere.org,\n‘+ ‘another@somewhere.org,\n‘+ ‘and one more: ftp://127.0.0.1/.\n‘+ ‘</p>‘;});
结果:
点击查看效果: http://plnkr.co/edit/I9j13MnyuDwOJPnBiKE1?p=preview
下面来具体说明一下这个栗子:
表格第一行:
myHtml是一段html,使用ng-bind-html来绑定(关于这个,详见angular-ngSanitize模块-$sanitize服务详解),然后使用linky过滤器,使myHtml里的链接都转换为可点击的a链接.
*注意,一旦使用了linky过滤器,则$sanitize净化不能生效,ng-bind-html也不能被解析为元素的html,仅能对链接部分进行转换.所以这里的p标签还是出现在了内容里.而不是作为html的p标签.
相关阅读: angular-ngSanitize模块-$sanitize服务详解
参考原文: https://docs.angularjs.org/api/ngSanitize/filter/linky
angular-ngSanitize模块-linky过滤器详解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。