Angular文字折叠展开组件的原理分析
来源:互联网 发布:电脑照片后期制作软件 编辑:程序博客网 时间:2024/05/20 05:05
自己写了个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的变化
其实大概思路就是很简单的,其他一些地方也是很容易理解~有什么好的方法欢迎推荐,或者文中有什么错漏或者不足还请多多留言告知,谢谢~
- Angular文字折叠展开组件的原理分析
- jquery文字折叠展开
- TextView显示文字时的折叠和展开
- Flex Tree组件展开和折叠的方法
- 使用Animation实现组件的折叠和展开
- ASPxNavBar的折叠展开
- easyui tree 单击文字展开/折叠
- UITableView的折叠与展开
- vim的展开和折叠
- tableview的展开和折叠
- TreeView中选中+号的文字后折叠或展开子节点
- 润乾——交叉分析展开折叠
- 润乾——分组分析展开折叠
- DevExpress的NavBarControl组件中NavBarGroup如何触发展开或者折叠事件?
- DevExpress的NavBarControl组件中NavBarGroup如何触发展开或者折叠事件(点击事件)?
- 折叠、展开
- 展开或折叠TreeCtrl的所有节点
- 三层嵌套gridview 的折叠展开
- POJ 3974 Palindrome
- MacOS搭建Python环境
- liunx下绿色版MySQL安装
- 工具类:ToastUtil
- run away
- Angular文字折叠展开组件的原理分析
- 在WPS中使用VBA7
- oracle 创建表空间,用户,赋权限
- 判断一个数是否是回文数
- poj #2096:Collecting Bugs
- Activity学习
- 调试
- 设计模式——门面模式
- STOP: c000021a { Fatal System Error } the initial session process or system process terminated ...