0
我想要的是，它是在我的輸入文本框中輸入的，然後它也會顯示在我的div中。
但它是爲第一師工作，但不爲第二師工作。
我有兩個分區爲下：角js中的多個指令
<div class="fittext" max-font-size="100" text="myText"></div>
<div class="fittext_bottom" max-font-size="100" textb="myText"></div>
對於我已經使用角JS作爲下：
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」 它正在工作，但它不適用於第二課「fittext_bottom」。
我已經使用了兩個指令，但對於第二個指令它不起作用。
請幫我解決它！
如果我在上面的JS編碼錯誤，請告訴我方法。
我想要的是，它在第一個文本框中輸入，然後它的文本應該在第一個分區中。如果我輸入第二個文本框，那麼它的文本應該是第二個分區。 – 2014-11-04 05:33:31
這是我的兩個文本框： – 2014-11-04 05:34:27
任何解決方案@Dylan？ – 2014-11-04 05:39:51