0
원하는대로 입력란에 입력하고 내 div에도 표시됩니다.
하지만 첫 번째 부문에서는 일하고 있지만 두 번째 부문에서는 동일하게 일하지 않습니다. 제가 아래로 각도 JS를 사용했는지를 들어각도 js에있는 여러 개의 지시문
<div class="fittext" max-font-size="100" text="myText"></div>
<div class="fittext_bottom" max-font-size="100" textb="myText"></div>
: I 미만에서는 2 개 분할을
가 작동 "fittext"
var app_top = angular.module('plnkr', []);
app_top.directive('fittext', function($timeout) {
return {
scope: {
minFontSize_top: '@',
\t maxFontSize_top: '@',
\t text: '='
\t },
restrict: 'C',
transclude: true,
template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
controller: function($scope, $element, $attrs) {
\t var maxFontSize_top = $scope.maxFontSize_top || 50;
\t var minFontSize_top = $scope.minFontSize_top || 8;
// text container
var textContainer = $element[0].querySelector('.textContainer');
// Add styles
angular.element(textContainer).css('word-wrap', 'break-word');
// max dimensions for text container
var maxHeight = $element[0].offsetHeight;
var maxWidth = $element[0].offsetWidth;
var textContainerHeight;
var textContainerWidth;
var fontSize = maxFontSize_top;
var resizeText_top = function(){
\t $timeout(function(){
// set new font size and determine resulting dimensions
textContainer.style.fontSize = fontSize + 'px';
textContainerHeight = textContainer.offsetHeight;
textContainerWidth = textContainer.offsetWidth;
if((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize_top){
// shrink font size
var ratioHeight = Math.floor(textContainerHeight/maxHeight);
var ratioWidth = Math.floor(textContainerWidth/maxWidth);
var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
fontSize -= shrinkFactor;
resizeText_top();
}else{ }
}, 0);
};
// watch for changes to text
$scope.$watch('text', function(newText, oldText){
\t if(newText === undefined) return;
// text was deleted
if(oldText !== undefined && newText.length < oldText.length){
\t fontSize = maxFontSize_top;
}
resizeText_top();
});
}
};
});
app_top.directive('fittext_bottom', function($timeoutBtm) {
return {
scope: {
minFontSize_btm: '@',
maxFontSize_btm: '@',
text: '=textb'
},
restrict: 'C',
transclude: true,
template: '<div class="textContainer_bottom" ng-bind="textb"></div>',
controller: function($scope, $element, $attrs) {
var maxFontSize_btm = $scope.maxFontSize_btm || 50;
var minFontSize_btm = $scope.minFontSize_btm || 8;
// text container
var textContainer_btm = $element[0].querySelector('.textContainer_bottom');
// Add styles
angular.element(textContainer_btm).css('word-wrap', 'break-word');
// max dimensions for text container
var maxHeight_btm = $element[0].offsetHeight;
var maxWidth_btm = $element[0].offsetWidth;
var textContainerHeight_btm;
var textContainerWidth_btm;
var fontSize_btm = maxFontSize_btm;
var resizeText_btm = function(){
$timeoutBtm(function(){
// set new font size and determine resulting dimensions
textContainer_btm.style.fontSize = fontSize_btm + 'px';
textContainerHeight_btm = textContainer_btm.offsetHeight;
textContainerWidth_btm = textContainer_btm.offsetWidth;
if((textContainerHeight_btm > maxHeight_btm || textContainerWidth_btm > maxWidth_btm) && fontSize_btm > minFontSize_btm){
// shrink font size
var ratioHeight_btm = Math.floor(textContainerHeight_btm/maxHeight_btm);
var ratioWidth_btm = Math.floor(textContainerWidth_btm/maxWidth_btm);
var shrinkFactor_btm = ratioHeight_btm > ratioWidth_btm ? ratioHeight_btm : ratioWidth_btm;
fontSize_btm -= shrinkFactor_btm;
resizeText_btm();
}else{ }
}, 0);
};
// watch for changes to text
$scope.$watch('textb', function(newTextB, oldTextB){
if(newTextB === undefined) return;
// text was deleted
if(oldTextB !== undefined && newTextB.length < oldTextB.length){
fontSize_btm = maxFontSize_btm;
}
resizeText_btm();
});
}
};
}); , 하지만 두 번째 클래스 "fittext_bottom"에서는 작동하지 않습니다.
두 개의 지시문을 사용했지만 두 번째 지시문의 경우에는 작동하지 않습니다.
제발 도와주세요!
내가 JS 코딩 위의 잘못된 경우 방법을 보여주십시오.
내가 원하는 것은 첫 번째 텍스트 상자에 입력 한 다음 텍스트가 첫 번째 부분에 있어야한다는 것입니다. 두 번째 텍스트 상자에 입력하면 그 텍스트는 두 번째 구분에 있어야합니다. –
다음은 두 개의 텍스트 상자입니다. –
@Dylan의 해결책은 무엇입니까? –