浅谈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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 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-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP 中常量的知识整理
2017/04/14 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
scrapy爬虫完整实例
2018/01/25 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
python 求定积分和不定积分示例
2019/11/20 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
vscode调试django项目的方法
2020/08/06 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
四好少年事迹材料
2014/01/12 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
委托书怎么写
2014/07/31 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
物流业务员岗位职责
2015/04/03 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python