指令问题-不捕获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

我认为有几种方法可以做到这一点，但是您可以将数字分成两个字符串，并将它们显示在一对样式span中。

演示: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位或更多的数字。

Answer 2

我更改了你的应用自定义样式的内容

checkout this PLUNKER LINK

更新后的指令看起来像

app.directive('enlargeText',function(){
  return {
    restrict: 'E',
    transclude: true,
    template: '<div class="mystyle"> <div ng-transclude=""> </div>  </div>',
  };
})

编辑

新的活塞，根据评论:活塞链接

你可以通过作用域变量