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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Express框架之connect-flash详解
May 31 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
详解webpack 入门与解析
Apr 09 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP实现下载断点续传的方法
2014/11/12 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP目录操作实例总结
2016/09/27 PHP
瀑布流布局代码一例
2014/04/11 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
微信小程序入门教程
2016/11/18 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Python中的__slots__示例详解
2017/07/06 Python
python根据时间获取周数代码实例
2019/09/30 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python爬虫之遍历单个域名
2019/11/20 Python
python识别验证码的思路及解决方案
2020/09/13 Python
若干个Java基础面试题
2015/05/19 面试题
物流合作计划书
2014/01/10 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
中学教师个人总结
2015/02/10 职场文书
保险公司增员口号
2015/12/25 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL