javascript - Angular js 中的多个指令

Question

我想要这样，当我在输入文本框中输入内容时，它也会显示在我的 div 中。
但它适用于第一分区，但不适用于第二分区。

我有两个部门，如下:

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

为此，我使用了 Angular JS，如下所示:

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();
  });
  }
};
});

对于第一类“fittext”，它可以工作，但对于第二类“fittext_bottom”，它不起作用。
我使用了两个指令，但对于第二个指令它不起作用。
请帮我解决一下!
如果我上面的 JS 编码有误，请告诉我。

Answer 1

您还需要在指令中将其设置为 fittextBottom。

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>