지시문 (구성 요소)이없는 버튼 그룹 만들기

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> 

위대한 작품! 내가 (예 A button group에 대한) 특정 마크 업을 필요로 할 때 그러나, 나는로 할 노력하고있어 :

내 버튼이 구성 요소 정의로 포장되어 있기 때문에 물론 부트 스트랩에 의해 올바르게 표시되지 않습니다

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

.

replace functionality is deprecated을 염두에두면이 문제를 어떻게 극복 할 수 있을까요?

Answer 1

구성 요소가 항상 html 요소는 아닙니다. 그것 일 수 있고 (수시로 html 성분의 그룹이다)

당신의 분대 템플렛은 주위 divbtn 그룹을 포함해야한다. 개별적 버튼을 다시 사용하려는 경우 당신이 이야기하는 경우가

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