自己写了个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>',
内容版权声明：除非注明，否则皆为本站原创文章。