css - 指令问题 - 不捕获 innerHTML 文本

Question

我的最终目标是捕获一个词，然后以特殊格式显示它。

具体来说，我需要捕获一个数字 123.4567 并以大格式显示最后两位数字。

为了解决这个问题，我开始编写指令。第一项任务是捕获指令中的数字。

但是，在我的第一步中，我无法捕获该号码。我的指令不是捕获值 123.4567 ，而是捕获变量 {{var1}}

plnkr here: http://plnkr.co/edit/kenLYeZ4RVqR4fJMGL2x?p=info

app.directive('enlargeText',function(){
  return {
    restrict: 'E',
    link: function(scope,element,attributes){
      console.log(element['0'].innerHTML);  //should give me 123.4567 but does not

    }

  };
})

知道为什么会发生这种情况以及如何解决它吗？

Answer 1

我认为有几种方法可以做到这一点，但您可以将数字分成两个字符串并将它们显示在几个跨度内以进行样式设置。

演示:http://plnkr.co/edit/1z8VwEk2MenOkRKgWGff?p=preview

指令:

app.directive('enlargeText', function() {
  return {
    scope: {
      num: '='
    },
    restrict: 'E',
    template: '<span class="smallDigit">{{small}}<span class="bigDigit">{{big}}</span></span>',
    link: function(scope, element, attributes) {
      scope.$watch('num', function(newVal) {
        if (!newVal) return;
        scope.small = scope.num.toString().slice(0, scope.num.toString().length - 2);
        scope.big = scope.num.toString().slice(-2);
      });
    }
  };
})

用法:

 <enlarge-text num='var1'></enlarge-text>
 <enlarge-text num='var2'></enlarge-text>

样式(取决于您的情况):

.bigDigit {font-size:2em} 

注意:此演示假设小数点后始终有 2 位或更多位数字。