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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
理解JS绑定事件
Jan 19 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
vue时间格式化实例代码
Jun 13 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
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安全编程之加密功能
2006/10/09 PHP
php+highchats生成动态统计图
2014/05/21 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python assert的用处示例详解
2019/04/01 Python
Python可迭代对象操作示例
2019/05/07 Python
py-charm延长试用期限实例
2019/12/22 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
个人自荐书
2013/12/20 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
自我查摆剖析材料
2014/10/11 职场文书
机关作风建设工作总结
2014/10/23 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
通报表扬范文
2015/01/17 职场文书
个人总结怎么写
2015/02/26 职场文书
工作会议通知
2015/04/15 职场文书
教师节祝酒词
2015/08/11 职场文书