AngularJS：md-button //我可以在ng按钮中有2行和2种字体大小，只需点击一下吗？

Question

我想要一个按钮（在NodeRed中，使用ui模板），按钮内部，标题字体10，然后休息，字体大小的值，但仍然在按钮？< / p>

从我所看到的情况来看，我只能为一个按钮声明一次文字大小，是他们的任何方式吗？

谢谢smooth_atonal_sound！我现在几乎在那里，stil需要帮助，点击下面的代码（改编自Scargill），ng-click指令不起作用，我该如何解决？

<style>
  .filled { 
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important; }
      
  .nr-dashboard-template {
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      overflow-y: hidden; }
      
  .rounded {
  border-radius: 7% 7% 7% 7%; }
   
   .fontbig {
  font-size: 28px;  }
   
   .fontsmall {
  font-size: 14px;  }
  
  .tolowercase {
    text-transform: lowercase;  }
    
  .tocapitalize {
    text-transform: capitalize; }

  .backgroundgreen {background: #73AD21;}
    
</style>



<script>
    $('.vibrate').on('click', function() {
      navigator.vibrate(100);
    });
     
    function restore_bg(x,y) {
                $(this).css("background-color", x);
        };
 
    $('.touched').on('mousedown', function() {
        var x= $(this).css("background-color");
        // $(this).css("background-color", "yellow");
        navigator.vibrate(80);
    });
</script>

<md-button 
    class="alerted filled touched rounded tocapitalize vibrate">
    <span style="fontsmall" {{msg.topic}}> <br><br>
    <span style="fontbig"{{msg.val}}>
    <ng-click="send({payload: 'test it...'})" >
</md-button>

Answer 1

是的，你可以。您可以像对待任何其他元素一样设置样式。

`<md-button>
    <span class="size-1">Primary Size</p>
    <span class="size-2">Secondary Size</p>
</md-button>`

`.size-1 {
    font-size: 10px;
}
.size-2 {
    font-size: 12px;
}`

Answer 2

这是一个工作版本，排序：

<md-button 
   class="alerted filled touched rounded tocapitalize vibrate"
   style="background-size: 100% 100%; background-repeat: no-repeat;"
   ng-click="send({payload: 'Red Button'})">
   <span class="fontsmall" >{{msg.topic}}</span><br><br>
   <span class="fontbig">{{msg.val}}</span>
</md-button>