title: Passing multiple 'button' parameters to Angular component
body: <p>I'm creating a reusable item picker component using Angular 1.5.  The picker has a search field and a list of items to choose from.  An example use case for the picker is a popup where the user selects some items and then has a "Continue" button to proceed.</p>
  
  <p>Conceptually, the search field and the list of items belong to the component and the "Continue" button belongs to the surrounding dialog.  However, I want to position the button next to the search field.  In some cases there are no extra buttons, sometimes one extra button, sometimes two.</p>
  
  <p>Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Elr10.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Elr10.png" alt="Item picker"></a></p>
  
  <p>What is the best way to create such a component?</p>
  
  <p>Options I've thought of:</p>
  
  <ol>
  <li><p>Create a component / directive for the item picker, put the button before or after the directive in the HTML, and use CSS to position the button.</p>
  
  <p>Here the positioning of the button is ugly and fragile, as it's not in the proper position within the HTML.  It would probably need a wrapper div and absolute positioning on top of the picker component:</p>
  
  <p><code>&lt;div style="position: relative"&gt;
    &lt;item-picker&gt;&lt;/item-picker&gt;
    &lt;button name="Continue" ng-click="submit()" style="position:absolute; top:5px; right: 5px"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></p></li>
  <li><p>Somehow pass the buttons and callbacks as parameters to the item picker component.  Here the ugliness is in the hard-coding of the buttons and styles and amount of buttons:</p>
  
  <p><code>&lt;item-picker btn1-text="Continue" btn1-style="primary" btn1-callback="submit()" btn2-text="Cancel" btn2-style="secondary" btn2-callback="cancel()"&gt;&lt;/item-picker&gt;</code></p>
  
  <p>I'm unsure whether the button configuration and callbacks could be passed as a single configuration object.  I'm mainly concerned about the callback functions, whether they will work properly if passed through a configuration object instead of proper <code>'&amp;'</code> callback binding.</p></li>
  <li><p>Stop trying to make the picker into a component / directive and just use <code>&lt;ng-include&gt;</code> to include the picker code which reads the button configuration from the scope.  Ugliness is in lack of scoping and not using components.</p></li>
  </ol>
  
  <p>Is there some best practise for such cases?</p>