Angular 1.5 组件按钮和样式

Question

由于 "replace" 配置通常已被弃用并且在 1.5 中不可用 angular.component 我想知道最佳做法是什么来设计组件样式并保持高可重用性。

示例：

app.component('changePasswordButton', {
   bindings: {
     users: '='
   },
   template: '<button class="btn btn-default"
               ng-disabled="vm.users.length == 0"
               ng-click="vm.changePassword()">Change password</button>',
   controllerAs: 'vm',
   controller: [function () {
      var vm = this;
      vm.changePassword = function () {
         //do it...
      });
   }]});

假设我想在使用按钮时设置按钮的样式，例如 "btn-primary"。

我做不到

 <change-password-button class="btn-primary"></change-password-button>

因为呈现的 html 将是：

<change-password-button class="btn-primary">
    <button ....>
</change-password-button>

关于如何在组件（按钮）上以可扩展且美观的方式应用上下文样式有什么想法吗？

Answer 1

我想到的唯一解决方案是添加绑定：

bindings: {
   applyClass: '@?'
},
template: '<button class="btn btn-default {{vm.applyClass}}"...

有技巧但不够漂亮。

Angular 1.5 组件按钮和样式

Angular 1.5 component buttons and styling

angularjs

angularjs-components