angular js中的多个指令

Question

I want that, it i type in my input textbox then it also be displayed in my div.
But it is working for the first division but not working for the same for the second division.

I have two divisions as under:

<div class="fittext" max-font-size="100" text="myText"></div>
<div class="fittext_bottom" max-font-size="100" textb="myText"></div>

For that i have used angular JS as under:

 var app_top = angular.module('plnkr', []); app_top.directive('fittext', function($timeout) { return { scope: { minFontSize_top: '@', maxFontSize_top: '@', text: '=' }, restrict: 'C', transclude: true, template: '<div ng-transclude class="textContainer" ng-bind="text"></div>', controller: function($scope, $element, $attrs) { var maxFontSize_top = $scope.maxFontSize_top || 50; 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(){ $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){ if(newText === undefined) return; // text was deleted if(oldText !== undefined && newText.length < oldText.length){ 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(); }); } }; }); 

For first class "fittext" it is working, but it is not working for the second class "fittext_bottom".
I have used two directives, but for second directive it is not working.
Please help me to solve it out!
Please show me way if i am wrong in above JS coding.

Answer 1

You need to make it fittextBottom in your directive also.

 var app_top = angular.module('plnkr', []); app_top.controller('MainCtrl', function($scope) { $scope.myText = 'myText'; $scope.myText_bottom = 'myText_bottom'; }); app_top.directive('fittext', function($timeout) { return { scope: { minFontSize_top: '@', maxFontSize_top: '@', text: '=' }, restrict: 'C', transclude: true, template: '<div ng-transclude class="textContainer" ng-bind="text"></div>', controller: function($scope, $element, $attrs) { var maxFontSize_top = $scope.maxFontSize_top || 50; 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() { $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) { if (newText === undefined) return; // text was deleted if (oldText !== undefined && newText.length < oldText.length) { fontSize = maxFontSize_top; } resizeText_top(); }); } }; }); app_top.directive('fittextBottom', function($timeout) { return { scope: { minFontSize_btm: '@', maxFontSize_btm: '@', text: '=textb' }, restrict: 'C', transclude: true, template: '<div class="textContainer_bottom" ng-bind="text"></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() { $timeout(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('text', function(newTextB, oldTextB) { if (newTextB === undefined) return; // text was deleted if (oldTextB !== undefined && newTextB.length < oldTextB.length) { fontSize_btm = maxFontSize_btm; } resizeText_btm(); }); } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="plnkr"> <div ng-controller="MainCtrl"> <input required ng-model="myText" name="text1" id="text1" maxlength="250" class="edit-text-inputbox" type="text" placeholder="Start type here (Top)..."> <input required ng-model="myText_bottom" class="edit-text-inputbox" type="text" placeholder="Start type here (Bottom)..." name="text2" id="text2" maxlength="250"> <div class="fittext" max-font-size="100" text="myText"></div> <div class="fittext_bottom" max-font-size="100" textb="myText_bottom"></div> </div> </div> 

Answer 2

you have text in the first and textb in the second for attributes to pass a model, but in the directive they are both

 text: '='

Just change it to

 text: '=textb'