浅谈Angular文字折叠展开组件的原理分析


Posted in Javascript onNovember 24, 2017

自己写了个Angular的文字折叠组件,这种组件其实很多地方都能用到效果如下

展开后的效果

浅谈Angular文字折叠展开组件的原理分析

折叠后的效果

浅谈Angular文字折叠展开组件的原理分析

先放全部代码,使用的时候只需要把自己需要展现的文字{{designer.des}}替换成自己所在路由器所需要绑定的数据即可

.directive('textfold', function() {
    return {
      restrict: 'EA',
      template: '<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">' + '<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>' + '<br />' + '<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>' + '</p>',
      link: function(scope, element, attrs) {
        var height;
        var maxheight;
        function textfold() {
          height = angular.element('#textfold').height();
          maxheight = angular.element('#textfold').height();
        }
        scope.$watch('designer.des', function(data) {
          if (data) {
            textfold();
          }
        })
        var isExtend = true;
        scope.isMore = "折叠";
        scope.more = function() {
          var minheight = 23;
          if (isExtend) {
            if (height >= minheight) {
              document.getElementById('textfold').style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height -= 10;
            } else {
              scope.isMore = "查看更多...";
              scope.$apply();
              isExtend = !isExtend;
              height += 10;
            }
          } else {
            if (height <= maxheight) {
              document.getElementById('textfold').style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height += 10;
            } else {
              scope.isMore = "折叠";
              scope.$apply();
              isExtend = !isExtend;
              height -= 10;
            }
          }
        }
      }
    }
  })

下面我一句句的分析这个组件的思路

首先肯定是定义好Angular该组件化的模板和使用模式

restrict: 'EA',
template: '<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">' + '<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>' + '<br />' + '<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>' + '</p>',

EA为,使用元素和属性的方法都可以在DOM里面展现这个插件,既我可以这样 <textfold></textfold>也可以这样<div textfold="Wsscat"></div>的形式来复用该组件 后面我们使用link定义一个函数

var height;
var maxheight;

这两个变量一个是此时折叠完后的高度(这个是在展开变成折叠的过程中不断发生变化的,最后折叠后就是等于minheight),一个文字完全展开时候获取的高度

function textfold() {
          height = angular.element('#textfold').height();
          maxheight = angular.element('#textfold').height();
        }
        scope.$watch('designer.des', function(data) {
          if (data) {
            textfold();
            scope.more();
          }
        })

这两句其实很重要的,当我们获取文字的高度时候,是必须要捕获文字的变化(文字完全渲染后的高度),所以我们用scope.$watch来捕获designer.des的变化,当data不为空,即文字已渲染后

if (data) {
            textfold();
          }

再去执行回调函数textfold来获取当前文字的高度,暂时试过这种方法可以获取到文字渲染后的高度

如果顺序执行而不是回调执行

angular.element('#textfold').height()

只会拿到span标签的默认高度而已

这里还可以添加个小技巧,增加一句scope.more();

if (data) {
            textfold();
            scope.more();
          }

这样就可以让它页面渲染完后先展开,然后再折叠,那么我们就在进来页面的时候默认是折叠的状态了,在程序里面,写这种效果,一般是先让它文字展开获取到高度再返回成折叠状态,来达到进来页面就是折叠的文字状态效果

var isExtend = true;这句是让下面的scope.more进入第一个分支折叠状态

setTimeout(function() {
                scope.more();
              }, 1);

这句是一句递归,其实就相当于实现jQuery的animate的文字框伸缩动画,只是这里用了一个递归来实现不断进来判断状态从而改变height值

然后通过改变scope.isMore改变它是查看更多…还是折叠

由于这里是用DOM操作

document.getElementById('textfold').style.height = height + "px";

下面这里最好加多一句

scope.$apply();

来获取DOM的变化

其实大概思路就是很简单的,其他一些地方也是很容易理解~有什么好的方法欢迎推荐,或者文中有什么错漏或者不足还请多多留言告知,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
vue 文件目录结构详解
Nov 24 #Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 #Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 #Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 #Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 #Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 #Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 #Javascript
You might like
php 安全过滤函数代码
2011/05/07 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python创建xml文件示例
2017/03/22 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python属于解释型语言么
2020/06/15 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
事业单位请假制度
2014/01/13 职场文书
文秘求职信范文
2014/04/10 职场文书
志愿者活动总结
2014/04/28 职场文书
心理健康活动总结
2014/04/30 职场文书
2014年稽查工作总结
2014/12/20 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
入团申请书格式
2019/06/20 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android