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

时间：2014-11-19 18:21:43 阅读：2220 评论：0 收藏：0 [点我收藏+]

本篇主要讲解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>‘;
});

结果:

bubuko.com,布布扣