使用指令(组件)创建按钮组

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的样式，这样它们就不会使用'>‘

.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;
}