本篇主要讲解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>&lt;div ng-bind-html="myHtml | linky"&gt;<br>&lt;/div&gt;</pre></td>

      <td><div ng-bind-html="myHtml | linky"></div></td>

    </tr>

    <tr>

      <td>使用linky+target编译链接</td>

      <td><pre>&lt;div ng-bind-html="myHtml | linky:'_blank'"&gt;<br>&lt;/div&gt;</pre></td>

      <td><div ng-bind-html="myHtml | linky:'_blank'"></div></td>

    </tr>

    <tr>

      <td>不编译链接</td>

      <td><pre>&lt;div ng-bind-html="myHtml"&gt;<br>&lt;/div&gt;</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'))

});

结果:

&lt;p&gt;下面这些都应该是链接:
<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>.
&lt;/p&gt;

相关阅读: angular-ngSanitize模块-$sanitize服务详解

参考原文: https://docs.angularjs.org/api/ngSanitize/filter/linky

完整代码: https://github.com/OOP-Code-Bunny/angular/tree/master/ngSanitize

angular-ngSanitize模块-linky过滤器详解的更多相关文章

  1. angular-ngSanitize模块-$sanitize服务详解

    本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和 ...

  2. MVC过滤器详解

    MVC过滤器详解   APS.NET MVC中(以下简称"MVC")的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理. ...

  3. Asp.Net MVC学习总结之过滤器详解（转载）

    来源:http://www.php.cn/csharp-article-359736.html   一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的 ...

  4. python中argparse模块用法实例详解

    python中argparse模块用法实例详解 这篇文章主要介绍了python中argparse模块用法,以实例形式较为详细的分析了argparse模块解析命令行参数的使用技巧,需要的朋友可以参考下 ...

  5. Python模块调用方式详解

    Python模块调用方式详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其 ...

  6. Nginx RTMP 模块 nginx-rtmp-module 指令详解

    译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解.指令Corertmp语法:rtmp { ... }上下文:根描述:保存所 ...

  7. Python中random模块生成随机数详解

    Python中random模块生成随机数详解 本文给大家汇总了一下在Python中random模块中最常用的生成随机数的方法,有需要的小伙伴可以参考下 Python中的random模块用于生成随机数. ...

  8. Wireshark过滤器详解

    Wireshark过滤器详解 1.Wireshark主要提供两种主要的过滤器 捕获过滤器:当进行数据包捕获时,只有那些满足给定的包含/排除表达式的数据包会被捕获 显示过滤器:该过滤器根据指定的表达式用 ...

  9. webRTC中语音降噪模块ANS细节详解(二)

    上篇(webRTC中语音降噪模块ANS细节详解(一))讲了维纳滤波的基本原理.本篇先给出webRTC中ANS的基本处理过程,然后讲其中两步(即时域转频域和频域转时域)中的一些处理细节. ANS的基本处 ...

随机推荐

  1. Caffe学习系列(4)：激活层（Activiation Layers)及参数

    在激活层中,对输入数据进行激活操作(实际上就是一种函数变换),是逐元素进行运算的.从bottom得到一个blob数据输入,运算后,从top输入一个blob数据.在运算过程中,没有改变数据的大小,即输入 ...

  2. Android webview使用详解

    1. 打开网页时不调用系统浏览器, 而是在本WebView中显示: mWebView.setWebViewClient(new WebViewClient(){ @Override public bo ...

  3. Android自动化压力测试图解教程——Monkey工具

    [置顶] Android自动化压力测试图解教程--Monkey工具 标签: 测试androidprofiling工具测试工具文档 2012-04-01 10:16 38185人阅读 评论(10) 收藏 ...

  4. [VIM] 格式化代码

    快速使用vim格式化代码 在vim的编辑模式i下直接ESC退出道命令模式之后直接敲入如下命令: gg=G        将全部代码格式化 nG=mG    将第n行到第m行的代码格式化 注:如果ESC ...

  5. [CareerCup] 2.2 Kth to Last Element of Linked List 链表的倒数第k个元素

    2.2 Implement an algorithm to find the kth to last element of a singly linked list. 这道题让我们求链表中倒数第k个元 ...

  6. spring cloud教程之使用spring boot创建一个应用

    <7天学会spring cloud>第一天,熟悉spring boot,并使用spring boot创建一个应用. Spring Boot是Spring团队推出的新框架,它所使用的核心技术 ...

  7. 端口扫描之王——nmap入门精讲（一）

    端口扫描在百度百科上的定义是: 端口扫描是指某些别有用心的人发送一组端口扫描消息,试图以此侵入某台计算机,并了解其提供的计算机网络服务类型(这些网络服务均与端口号相关),但是端口扫描不但可以为黑客所利 ...

  8. linq查询语句转mongodb

    && (与操作) 子表达式可以通过&&合并来查询满足所有子表达式的文档 var query = from c in collection.AsQueryable< ...

  9. [设计模式] javascript 之 工厂方法模式

    1. 简单工厂模式 说明:就是创建一个工厂类,里面实现了所对同一个接口的实现类的创建. 但是好像JavaScript 好像没有 接口 这号东西,所以我们去掉接口这个层; 当然,我们这里的 实现类 下的 ...

  10. [设计模式]第三回：抽象工厂模式（Abstract Factory）

    概述 在系统中往往会有这种需求,客户端会用到很多对象,而且根据需求变化很可能会切换成另外一套对象.抽象工厂模式可以提供一种封装机制来面对这种需求. 实践 物理模型: 皮肤主题:设计一个可以切换皮肤主题 ...