Question

我有一个plugin，可以重新调整文字大小以适合<div>。

我有一条指令告诉div div内的{em>颜色和 font-size 。但是，它只能更改颜色，而不能更改 font-size 。

我的问题是：如何覆盖此插件 font-size ？

我无法导入ng-fi-text插件。所以，我把它放在Javascript代码段中。

实际代码在html中。

＆＃13;

/*! ng-fi-text v0.1.0 - 2014-11-10 
 *  License: MIT
 *  Author: Leandro Bessone */


angular.module('ng-fi-text', [])
  .directive('ngFiText', ['$window',
    function($window) {

      "use strict";

      return {

        restrict: 'A',
        scope: {
          ngFiText: '@',
          ngFiTextHtml: '@'
        },
        link: function postLink(scope, element, attrs) {


          if (!window.jQuery) {
            console.error('ng-fi-text needs jQuery to work. Sory :(');
            return;
          }


          // Options
          var rotate = attrs.ngFiTextRotate || false;
          var maxFontSize = attrs.ngFiTextMaxFontSize || false;
          // var minFontSize = attrs.ngFiTextMinFontSize || false;
          //var lineHeightMultiplier = attrs.ngFiTextLineHeightMultiplier || false;
          var implementationType = attrs.hasOwnProperty('ngFiTextHtml') ? 'html' : 'text';


          // Internal Options
          var heightTolerance = 3;
          var fontSize = 10;
          var loopLimiter = 25; // higher is more accurate but increases process. Min 5~6

          var executionOdometer = 0;




          // Creating the element
          var rotateToAdd = rotate ? ' rotate(' + rotate + 'deg) ' : '';
          var textElem = angular.element('<div />').attr('style',
            'word-wrap: break-word;' +
            'line-height: normal;' +
            'margin: 0px;' +
            //'padding: 0px;'+
            'position: absolute; ' +
            'left:0px;' +
            'right: 0px;' +
            'top: 50%;' +
            '-webkit-transform: translate(0%,-50%) ' + rotateToAdd + ';' +
            '-moz-transform: translate(0%,-50%) ' + rotateToAdd + ';' +
            '-ms-transform: translate(0%,-50%) ' + rotateToAdd + ';' +
            'transform: translate(0%,-50%) ' + rotateToAdd + ';'
          );
          element.html(textElem);



          function contentFilling(callback) {

              var text = '';

              if (implementationType === 'html') {
                text = attrs.ngFiTextHtml || element.html() || '';
              } else {
                text = attrs.ngFiText || element.text() || '';
              }

              // Populating the DOM
              textElem[implementationType](text);

              if (callback)
                callback();

            } // contentFilling



          function executeMagic() {

              onStarted();

              executionOdometer++;

              var elementParent = textElem.parent();
              var elemParentHeight = elementParent.height();
              //var elemParentWidth = elementParent.width(); 

              var elemHeight;
              var heightDiff;

              var baseCorrection = 10;
              var definitiveCorrection;

              var direction;
              var prevDirection = false;

              var currLoop = 1;
              var currXLoop = 0;
              var correctionMultiplier = 1;

              var newFontSize = fontSize;


              heightDiff = elemParentHeight - elemHeight;

              var lastSameDirectionDiff = '',
                preLastSameDirectionDiff = '';
              var lesserDiff = false;
              var lesserSize = false;


              function grossCorrection(executionNumber) {

                  if (currLoop > loopLimiter) {
                    //console.log('no more loops :(');
                    //console.log('----------------------------------------- no + loops');
                    onFinished(newFontSize);
                    return;
                  }

                  onLoopStarted();


                  textElem.css('font-size', newFontSize + 'px');
                  if (implementationType === 'html') {
                    textElem.children().css('font-size', newFontSize + 'px');
                  }

                  window.setTimeout(function() {

                    if (executionNumber !== executionOdometer) {
                      return;
                    }

                    elemHeight = textElem.height();
                    heightDiff = elemParentHeight - elemHeight;



                    if (heightDiff >= 0 && (heightDiff < lesserDiff || !lesserDiff)) {
                      lesserDiff = heightDiff;
                      lesserSize = newFontSize;
                    }


                    direction = heightDiff >= 0 ? 1 : -1;


                    if (prevDirection && prevDirection !== direction) {

                      if (preLastSameDirectionDiff === heightDiff) {
                        //console.log('------------------ deberia parar -----------');
                        if (newFontSize !== lesserSize) {
                          textElem.css('font-size', lesserSize + 'px');
                          if (implementationType === 'html') {
                            textElem.children().css('font-size', lesserSize + 'px');
                          }
                        }
                        //console.log('----------------------------------------- dp');
                        onFinished(newFontSize);
                        return;

                      }

                      preLastSameDirectionDiff = lastSameDirectionDiff;
                      lastSameDirectionDiff = heightDiff;

                      currXLoop++;
                      correctionMultiplier = correctionMultiplier * (1 - 0.25 * currXLoop);
                      correctionMultiplier = correctionMultiplier < 0.05 ? 0.05 : correctionMultiplier;
                    }


                    prevDirection = direction;
                    definitiveCorrection = baseCorrection * correctionMultiplier * direction;
                    newFontSize = newFontSize + definitiveCorrection;

                    /* 
                        console.log( 
            				'l'+currLoop +
            				' | LSD:'+lastSameDirectionDiff+
            				' | ldif:'+lesserDiff+
            				' | elHght:'+elemHeight + 
            				' | hDiff:'+heightDiff + 
            				' | cx:'+correctionMultiplier+
            			    ' | def_corr:'+definitiveCorrection + 
            			    ' | newFontSize:'+newFontSize + 
            			    '');
*/

                    currLoop++;


                    if (Math.abs(heightDiff) > heightTolerance) {
                      grossCorrection(executionOdometer);
                    } else {
                      //console.log('-----------------------------------------end');
                      onFinished(newFontSize);
                    }
                  }, 0);
                } //gross

              grossCorrection(executionOdometer);


            } // executeMagic




          function onStarted() {
            textElem.css('visibility', 'hidden');
          }

          function onLoopStarted() {

          }

          function onFinished(finalFontSize) {

            if (maxFontSize && finalFontSize > maxFontSize) {
              textElem.css('font-size', maxFontSize + 'px');
            }

            textElem.css('visibility', 'visible');
          }

          function onResizeStarted() {
            textElem.css('visibility', 'hidden');
          }

          // window resizing responsivenes
          var timeoutHolder;
          angular.element($window).bind('resize', function() {
            window.clearTimeout(timeoutHolder);
            onResizeStarted();
            timeoutHolder = window.setTimeout(executeMagic, 150);

          });


          // update on values changing
          scope.$watchGroup(['ngFiText', 'ngFiTextHtml'], function(newValue, oldValue) {
            contentFilling(executeMagic);
          });


          // Staring the magic...
          contentFilling(executeMagic);


        }
      };
    }
  ]);

＆＃13;

.myDiv {
  width: 270px;
  height: 70px;
  border: solid orange;
  position: absolute;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.4.2/angular.js"></script>
</head>

<body>

  <div class='myDiv' resize-text ng-fi-text ng-fi-text-html='1234'></div>

</body>

</html>

<script>
  var app = angular.module('plunker', ['ng-fi-text']);

  app.directive('resizeText', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var text_len = element.text().length;
        if (text_len < 15) {
          element.css('font-size', '10px');
          element.css('color', 'red');
        }
      }
    }
  })
</script>

＆＃13;

Answer 1

刚刚找到解决方案：

element.addClass('small');

并设计风格：

<style>
.small > div 
{
font-size: 10px !important;
}
</style>

指令无法调整div内文本的字体大小

1 个答案: