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

秒速五厘米 2022-05-26 07:20 153阅读 0赞

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

展开后的效果

![format_png][]

折叠后的效果

![format_png 1][]

先放全部代码，使用的时候只需要把自己需要展现的文字\{ \{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里面展现这个插件，既我可以这样 <textfold></textfold>也可以这样<div textfold="Wsscat"></div>的形式来复用该组件 后面我们使用link定义一个函数

var height;
    var maxheight;

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

这两句其实很重要的，当我们获取文字的高度时候，是必须要捕获文字的变化（文字完全渲染后的高度），所以我们用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的变化

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[format_png]: /images/20220526/fd6d540ce93e4c7bb01d401b20bad91c.png
[format_png 1]: /images/20220526/9cb2b34d55ef4b328759f40518089d2d.png
[20191229112121499.png]: /images/20220526/0bc4eb4b86fe4063a228c22bfe0136d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220526/c87ce5491fd34a1a96606089e82a4f9b.png