本篇文章主要介绍了浅谈Angular文字折叠展开组件的原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
自己写了个Angular的文字折叠组件，这种组件其实很多地方都能用到效果如下
展开后的效果
折叠后的效果
先放全部代码，使用的时候只需要把自己需要展现的文字{{designer.des}}替换成自己所在路由器所需要绑定的数据即可
.directive('textfold', function() { return { restrict: 'EA', template: '' + '{{designer.des}}' + '
' + '{{isMore}}' + '
', 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: '' + '{{designer.des}}' + '
',
' + '{{isMore}}' + '
EA为，使用元素和属性的方法都可以在DOM里面展现这个插件，既我可以这样
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文字折叠展开组件的原理分析的详细内容，更多请关注0133技术站其它相关文章！
