Angularコンポーネントに複数の 'button'パラメータを渡す

Question

私は、Angular 1.5を使用して再利用可能なアイテムピッカーコンポーネントを作成しています。ピッカーには、検索フィールドと選択する項目のリストがあります。ピッカーのユースケースの例は、ユーザがいくつかの項目を選択し、次に続行するための「続行」ボタンを有するポップアップである。

概念的には、検索フィールドとアイテムのリストはコンポーネントに属し、「続行」ボタンは周囲のダイアログに属します。ただし、検索フィールドの横にボタンを配置したい。いくつかのケースでは、余分なボタン、時には1つの余分なボタン、時には2つがありません。このような

何か：

、このようなコンポーネントを作成するための最良の方法は何ですか？

1. 、アイテムピッカーのためのコンポーネント/ディレクティブを作成し、HTMLでディレクティブの前または後にボタンを配置し、ボタンを配置するためにCSSを使用します。私が考えてきた

   オプション。

   ここで、ボタンの位置は、HTML内の適切な位置にないため、醜くて壊れやすいものです。これはおそらく、ピッカーコンポーネントの上にラッパーのdivと絶対配置が必要になります：

   <div style="position: relative"> <item-picker></item-picker> <button name="Continue" ng-click="submit()" style="position:absolute; top:5px; right: 5px"></button> </div>

2. は、どういうわけか、アイテムピッカーコンポーネントのパラメータとして、ボタンとコールバックを渡します。ここで醜さは、ボタンやスタイルやボタンの量のハードコーディングである：

   <item-picker btn1-text="Continue" btn1-style="primary" btn1-callback="submit()" btn2-text="Cancel" btn2-style="secondary" btn2-callback="cancel()"></item-picker>

   私はボタンの設定とコールバックは、単一の構成オブジェクトとして渡すことができるかどうかわかりませんよ。私は、適切な'&'コールバックバインディングの代わりに設定オブジェクトを渡すと正しく動作するかどうか、主にコールバック関数に関心があります。

3. ピッカーをコンポーネント/ディレクティブにするのをやめ、<ng-include>を使用して、スコープからボタン構成を読み取るピッカーコードを含めるだけです。醜さは、スコープの欠如にあり、コンポーネントを使用していません。

このような場合にはいくつかのベストプラクティスがありますか？

Answer 1

一つの可能​​な解決策は、あなたのコードは次のようなものを見ることができるので、NG-transcludeを使用することです：

マークアップ

​​

指令

angular.module('myApp', []) 
.directive('itemPicker', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     ... 
    }, 
    templateUrl: 'item-picker.html' 
    }; 
}); 

itemPickerテンプレートマークアップ

<div class="item-picker"> 
    <div class="item-picker-controls"> 
    <div class="item-picker-search"><input type="search" ng-model="..."></div> 
    <div class="btn-group" ng-transclude></div> 
    </div> 
    <ul class="item-picker-list"> 
    <li ng-repeat="item in items" ng-bind="item"></li> 
    </ul> 
</div><!-- end item-picker template --> 

もちろん、上記のコードは単なる例であり、itemPickerコンポーネントについて多くの前提を設定しています。また、ボタンを配置するにはCSSを使用する必要がありますが、コンポーネントのコンテキスト内にあるb/cを使用するのは簡単です。

注 「マルチスロットの移行」を利用することもできます。これはおそらく、ボタンの数と種類が予測可能で、マークアップの配置にかかわらず一貫性のある方法で並べ替えたい場合に便利です。

これが役に立ちます。