Question

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

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

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

然而，在我的第一步中，我无法捕捉到这个数字。它捕获变量123.4567

而不是我的指令捕获值{{var1}}

plnkr： 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

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

结帐PLUNKER LINK

更新的指令看起来像

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

修改

根据评论新的plunker：PLUNKER LINK

您可以使用文本参数通过范围变量
传递任何您想要的内容

Answer 2

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

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

指令麻烦 - 不捕获innerHTML文本

2 个答案: