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标签.
表格第二行:
给linky添加参数: '_blank',表示链接在新窗口中打开.其余同上.
表格第三行:
不使用linky过滤器,所以$sanitize服务会净化myHtml,然后作为.html()绑定到div里.所以可以看到,p标签是成为标签了,而不是文本内容的一部分.
另外,注入$filter服务后可以这样用:
$filter('linky')(htmlString,target)
可以得到htmlString经过linky过滤器编译的结果.
eg:
app.controller('ctrlLinky',function($scope,$sce,$filter){
$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>';
console.log($filter('linky')($scope.myHtml,'_blank'))
});
结果:
<p>下面这些都应该是链接: <a target="_blank" href="http://angularjs.org/">http://angularjs.org/</a>, <a target="_blank" href="mailto:us@somewhere.org">us@somewhere.org</a>, <a target="_blank" href="mailto:another@somewhere.org">another@somewhere.org</a>, and one more: <a target="_blank" href="ftp://127.0.0.1/">ftp://127.0.0.1/</a>. </p>
相关阅读: angular-ngSanitize模块-$sanitize服务详解
参考原文: https://docs.angularjs.org/api/ngSanitize/filter/linky
完整代码: https://github.com/OOP-Code-Bunny/angular/tree/master/ngSanitize
angular-ngSanitize模块-linky过滤器详解的更多相关文章
- angular-ngSanitize模块-$sanitize服务详解
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和 ...
- MVC过滤器详解
MVC过滤器详解 APS.NET MVC中(以下简称"MVC")的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理. ...
- Asp.Net MVC学习总结之过滤器详解（转载）
来源:http://www.php.cn/csharp-article-359736.html 一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的 ...
- python中argparse模块用法实例详解
python中argparse模块用法实例详解 这篇文章主要介绍了python中argparse模块用法,以实例形式较为详细的分析了argparse模块解析命令行参数的使用技巧,需要的朋友可以参考下 ...
- Python模块调用方式详解
Python模块调用方式详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其 ...
- Nginx RTMP 模块 nginx-rtmp-module 指令详解
译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解.指令Corertmp语法:rtmp { ... }上下文:根描述:保存所 ...
- Python中random模块生成随机数详解
Python中random模块生成随机数详解 本文给大家汇总了一下在Python中random模块中最常用的生成随机数的方法,有需要的小伙伴可以参考下 Python中的random模块用于生成随机数. ...
- Wireshark过滤器详解
Wireshark过滤器详解 1.Wireshark主要提供两种主要的过滤器 捕获过滤器:当进行数据包捕获时,只有那些满足给定的包含/排除表达式的数据包会被捕获 显示过滤器:该过滤器根据指定的表达式用 ...
- webRTC中语音降噪模块ANS细节详解(二)
上篇(webRTC中语音降噪模块ANS细节详解(一))讲了维纳滤波的基本原理.本篇先给出webRTC中ANS的基本处理过程,然后讲其中两步(即时域转频域和频域转时域)中的一些处理细节. ANS的基本处 ...
随机推荐
- 即学即会 Java 程序设计基础视频教程（100课整）无水印版
课程总共包含100个课时,总授课长达27多个小时,内容覆盖面广,从入门到精通,授课通俗易懂,分析问题独到精辟通过本套视频的学习,学员能够快速的掌握java编程语言,成为java高手. 课程目录:课时1 ...
- 20135220谈愈敏Linux Book_4
进程调度 进程:程序的运行态表现形式 进程调度程序:确保进程能有效工作的一个内核子系统,决定将哪个进程投入运行.何时运行以及运行多长时间,在可运行态进程之间分配有限的处理器时间资源. 最大限度的利用处 ...
- 浩瀚先森（guohao1206.com)
博客搬家啦,新博客地址:浩瀚先森 http://www.guohao1206.com
- .NET中常用的几种解析JSON方法
一.基本概念 json是什么? JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是一种轻量级的数据交换格式,是存储和交换文本信息的语法. ...
- iOS 后台运行 类型
iOS后台运行,需要有特定的类型才可以进行.这些内容并不是一直不变的,苹果也在逐步的更新这些内容. 本文内容是2015年11月03日时苹果支持的后台运行类型. 这是官方连接地址 其中较为重要的是下面这 ...
- 从士兵到程序员再到SOHO程序员
2013年9月13日,我从就职了一年半的S公司正式离职,并开始了我梦寐以求的“SOHO程序员”之路. 这对于我来说,是一次人生道路上的重要选择,在这里,我想分享一下我是如何选择了这条道路的,同时也是对 ...
- 一个HTML5老兵坦言：我们真的需要“小程序”么？
在PC时代,浏览器成为互联网信息的入口,并非因为它支持了HTML技术,而是因为它给人类带来了“世界是平的”的空间和理念,人类历史上第一次实现了信息的互联互通. 今天,微信虽然用了HTML5技术来做应用 ...
- [转载]使用HttpWebRequest进行请求时发生错误：基础连接已关闭，发送时发生错误处理
转载,原文来自 http://blog.csdn.net/hawksoft/article/details/21776009 最近调试原来的微信模拟登陆时发生了“基础连接已关闭,发送时发生错误”的错误 ...
- Bootstrap3.0学习第七轮(按钮)
详情请查看http://aehyok.com/Blog/Detail/13.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
- 我眼中的Android IDE
我作为一个Android小白,首先跟Android打交道的就是它的IDE(Integrated Development Environment,集成开发环境)了. 记得刚开始时是从图书馆借了本Andr ...