Сделать группу кнопок из директив (компонентов)

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.

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