ディレクティブ（コンポーネント）からボタングループを作成する

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> 

は素晴らしい作品！

私のボタンはコンポーネント定義に包まれているので、もちろん、ブートストラップによって正しく表示されない

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

：私は、特定のマークアップ（たとえば、button group）を必要とするときしかし、私はそれをやろうとしています。

replace functionality is deprecatedを念頭に置いて、この問題を解決する方法を知りたいですか？

Answer 1

コンポーネントが必ずしもhtml要素であるとは限りません。それは可能です（そして多くの場合、html要素のグループです）

あなたのコンポーネントテンプレートには、周囲のdiv btn-groupが含まれている必要があります。あなたは個別のボタンを再利用したい場合は、話をした場合、彼らは「>」

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