angularjs通过过滤器返回超链接的方法


Posted in Javascript onOctober 26, 2018

在项目中有一个功能,需要把一段字符串拼接成一个超链接,效果如下图,

angularjs通过过滤器返回超链接的方法

从数据库中得到的字符串格式如下

angularjs通过过滤器返回超链接的方法

数据的格式很工整,以“#”和空格为标志就可以很顺利的分割,

angularjs通过过滤器返回超链接的方法

开始想象的很美好,以为直接返回就好了。

但是现实很残酷,a标签并没有变成超链接,而是变成了一个字符串

angularjs通过过滤器返回超链接的方法

检查发现并没有被转义,对这个感到不太理解

angularjs通过过滤器返回超链接的方法

之后又在网上找了找,没找到合适的办法,后来询问学长,学长高数我有一个ngBindHtml的标签,于是去看了看官方文档,用法和效果如下

angularjs通过过滤器返回超链接的方法

angularjs通过过滤器返回超链接的方法

(第三个文件夹的作用没尝试出来,不知道是干啥的)

好像效果很符合,但应该怎么使用呢,filter里面是没法用$scope的,(事后想到不一定要用filter,完全可以写一个方法直接把这个字符串转化了,虽然这样很麻烦,但确实是一个思路)

没想到好办法,只能继续问学长了,没想到方法简单到不行,angualrjs早就考虑到了,ngbindhtml可以直接使用过滤器

angularjs通过过滤器返回超链接的方法

简简单单就解决了

angularjs通过过滤器返回超链接的方法

总结

对于这个问题,事后想了想,发现还是自己考虑问题不全面,在学长告诉自己ngbindhtml后,一直纠结于他的用法,而没有想到去研究研究过滤器可以用于那些地方,是否可以在属性中。虽然已经渐渐尝试去看官方文档了,但离真正会看官方文档的道路还很长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
js使用formData实现批量上传
Mar 27 #Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 #Javascript
js自定义input文件上传样式
Oct 26 #Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 #Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 #Javascript
webpack4+react多页面架构的实现
Oct 25 #Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 #Javascript
You might like
php array_intersect()函数使用代码
2009/01/14 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
laravel 数据验证规则详解
2019/10/23 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
pandas分批读取大数据集教程
2020/06/06 Python
python如何写try语句
2020/07/14 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
人力资源专员岗位职责
2014/01/30 职场文书
超市活动计划书
2014/04/24 职场文书
怎样写好工作计划
2019/04/10 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers