angular-ngSanitize模块-linky过滤器详解-白红宇

angular-ngSanitize模块-linky过滤器详解

阅读量：6680 次

发布时间：2019-06-25

本文共 2086 字，大约阅读时间需要 6 分钟。

本篇主要讲解angular中的linky这个过滤器.此过滤器依赖于ngSanitize模块.

linky能找出文本中的链接,然后把它转换成html链接.什么意思,就是说,一段文本里有一个链接,但是这个链接没有被a标签嵌套,linky能把它找出来,然后给它加上a标签并且给a链接添加正确的href属性,还可以设置打开的方式(_blank,_self,等...).

它查找链接是根据这些关键词来的: http/https/ftp/mailto/,或者就直接是一个email地址.

下面来看栗子:

html:

    
             
     
       
      
           
        通过ngSanitize模块的linky过滤器编译链接
                                             过滤方式                指令的写法                解析结果             
           
                                      使用linky编译链接                <div ng-bind-html="myHtml | linky">
</div>                
                      
                           使用linky+target编译链接                <div ng-bind-html="myHtml | linky:'_blank'">
</div>                
                      
                           不编译链接                <div ng-bind-html="myHtml">
</div>                
                      
           
        
  
      plunker

通过ngSanitize模块的linky过滤器编译链接
过滤方式	指令的写法	解析结果
使用linky编译链接	<div ng-bind-html="myHtml \| linky"> </div>
使用linky+target编译链接	<div ng-bind-html="myHtml \| linky:'_blank'"> </div>
不编译链接	<div ng-bind-html="myHtml"> </div>

js:

var app =angular.module('myApp',['ngSanitize']);app.controller('ctrlLinky',function($scope,$sce){    $scope.myHtml = ''+    '下面这些都应该是链接:\n'+    'http://angularjs.org/,\n'+    'mailto:us@somewhere.org,\n'+    'another@somewhere.org,\n'+    'and one more: ftp://127.0.0.1/.\n'+    '
';});

结果:

点击查看效果:

下面来具体说明一下这个栗子:

表格第一行:

myHtml是一段html,使用ng-bind-html来绑定(关于这个,详见),然后使用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 = ''+    '下面这些都应该是链接:\n'+    'http://angularjs.org/,\n'+    'mailto:us@somewhere.org,\n'+    'another@somewhere.org,\n'+    'and one more: ftp://127.0.0.1/.\n'+    '
';    console.log($filter('linky')($scope.myHtml,'_blank'))});

结果:

<p>下面这些都应该是链接:
http://angularjs.org/,
us@somewhere.org,
another@somewhere.org,
and one more: ftp://127.0.0.1/.
</p>