Multiple directives in 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'