Angular 텍스트 접기 및 확장 효과의 간단한 구현
- 小云云원래의
- 2017-12-18 11:43:562743검색
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;
}
}
}
}
}
})분석하겠습니다. 이 구성 요소 문장을 문장 단위로 아이디어
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에 표시할 수 있다는 것입니다. , 이렇게 할 수 있습니다cb32027a7b170974526dd2d7ac8e4b6d72d6f4e402c93e7ffaeb80c6e7902589 이 구성요소를 a607a8b0896de90debb5682d9fb58fe494b3e26ee717c64999d7867364b1b4a3 나중에 링크를 사용하여 함수를 정의할 수도 있습니다
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();
scope.more();
}
})
이 두 문장은 실제로 매우 중요합니다. 텍스트의 높이를 얻을 때 텍스트의 변경 사항(텍스트가 완전히 렌더링된 후의 높이)을 캡처해야 하므로 범위를 사용합니다.$ designer.des의 변경 사항을 캡처합니다. 즉, 텍스트가 렌더링된 후
if (data) {
textfold();
}
콜백 함수 textfold를 실행하여 현재 텍스트의 높이를 가져옵니다. 렌더링 후 텍스트 높이를 가져오기 위해 일시적으로 이 방법을 시도했습니다.
콜백 대신 순차적으로 실행하면
angular.element('#textfold').height()은 범위 태그의 기본 높이만 가져옵니다
약간의 트릭을 추가할 수도 있습니다. 여기에scope.more();
if (data) {
textfold();
scope.more();
}
var isExtend = true; 다음 범위를 사용하여 첫 번째 분기 접기 상태를 입력하세요.
setTimeout(function() {
scope.more();
}, 1);
이 문장은 재귀 문장으로, 실제로 jQuery의 애니메이트의 텍스트 상자 확장 애니메이션 구현과 동일합니다. 단, 여기에서 재귀를 사용하여 지속적으로 판단한다는 점이 다릅니다. status를 변경하고 높이 값을 변경하세요
그리고 나서scope.isMore를 변경하여 더 자세히 보거나...또는 축소하세요
여기가 DOM 작업 사용document.getElementById('textfold').style.height = height + "px";
한 문장을 더 추가하는 것이 가장 좋습니다.
scope.$apply();
DOM 변경을 가져오기
관련 추천:
JavaScript 호환 IE6 접기 및 펼치기 효과 구현 사례
접기에 대한 추천 기사
위 내용은 Angular 텍스트 접기 및 확장 효과의 간단한 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!