Question

所以一切都应该是component。

假设我定义了一些用于编辑/删除/查看我的域对象的按钮组件。举个例子：

angular.module('xxx').component('editButton', {
  bindings: {domainObject: '<'},
  template: '<button class="btn btn-default" ng-click="$ctrl.displayEditForm()">Edit</button>'
  controller: /* ... */
});

我用它作为：

<edit-button domain-object="$ctrl.myDomainObject"></edit-button>

效果很好！但是，当我需要一个特定的标记（例如button group）时，我试图这样做：

<div class="btn-group">
  <edit-button domain-object="object"></edit-button>
  <delete-button domain-object="object"></delete-button>
</div>

Bootstrap当然无法正确显示，因为我的按钮是用组件定义包装的。

请记住replace functionality is deprecated，我想知道如何克服这个问题？

Answer 1

组件并不总是html元素。它可以（通常是一组html元素）

您的组件模板应包含周围的div btn-group。

template: '<div class="btn-group"><button class="btn btn-default" ng-click="$ctrl.displayEditForm()">Edit</button>'...etc.

现在，如果您想单独重复使用按钮，您可以覆盖bootstrap的样式，以便它们不使用'＆gt;'

.your-page .btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

而不是

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
}

用指令（组件）创建一个按钮组

1 个答案: