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

PHPABC angularjs 1,114 次浏览 , , 没有评论

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;
使用linky+target编译链接 
<div ng-bind-html="myHtml | linky:'_blank'">
</div>
不编译链接 
<div ng-bind-html="myHtml">
</div>

plunker


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来绑定，然后使用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;&#19979;&#38754;&#36825;&#20123;&#37117;&#24212;&#35813;&#26159;&#38142;&#25509;:&#10;<a target="_blank" href="http://angularjs.org/">http://angularjs.org/</a>,&#10;<a target="_blank" href="mailto:us@somewhere.org">us@somewhere.org</a>,&#10;<a target="_blank" href="mailto:another@somewhere.org">another@somewhere.org</a>,&#10;and one more: <a target="_blank" href="ftp://127.0.0.1/">ftp://127.0.0.1/</a>.&#10;&lt;/p&gt;

相关阅读: angular-ngSanitize模块-$sanitize服务详解
参考原文: https://docs.angularjs.org/api/ngSanitize/filter/linky
完整代码: https://github.com/OOP-Code-Bunny/angular/tree/master/ngSanitize

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

Go