When building a complex angular component, should I use attributes or transclusion?
<p><strong>The problem</strong></p>

<p>I'm trying to build a pretty complex angular component and I'm not sure about the best way to do it.</p>

<p>If I had to describe my component as a function the main parameters would be:</p>

<ul>
<li>a function that generates a list of element</li>
<li>a template to render these elements (if it's an element of type A use template A and so on)</li>
<li>a list of possible actions that can be applied to an element of the list (with some additional data for dysplaying them, like a text and an icon to build a button). </li>
</ul>

<p>So to give you an example I may want to create a list with these parameters:</p>

<ul>
<li>function that retrieves 10 users</li>
<li>template for a "user" element</li>
<li>list of actions [{action: deleteUser, icon: deleteIconPath, text: 'delete'}]</li>
</ul>

<p>I'm not sure if this is the best approach, but the component should be able to handle the list of elements by itself and should not receive it by its container.</p>

<p><strong>Possible solutions</strong></p>

<p><strong>1</strong></p>

<p>The first obvious solution would be to let the container manage the list of elements (first parameter) and to transclude the element template and actions.</p>

<pre><code>&lt;my-list&gt;
    &lt;elements&gt;
        &lt;div ng-repeat="elem in $ctrl.getData()&gt;
            &lt;element&gt;
                &lt;user e="elem"&gt; &lt;/user&gt;
            &lt;/element&gt;
            &lt;actions&gt;
                &lt;button action="$ctrl.delete(elem)&gt;delete&lt;/button&gt;
            &lt;/actions&gt;
    &lt;elements&gt;
&lt;/my-list&gt;
</code></pre>

<p><strong>2</strong></p>

<p>A completetly different solution would be to pass everything as an attribute of the component </p>

<pre><code>&lt;my-list&gt; 
    data-getter="$ctrl.getData" 
    template="user"
    actions="[{action: deleteUser, icon: deleteIconPath, text: 'delete'}]"
&lt;/my-list&gt;
</code></pre>

<p><strong>1 vs 2 comparison</strong></p>

<p>The solution 1 seems to be very standard for angular but in my case it would mean a lot of verbosity and repetition of code and I don't like it too much. The solutions 2 seems to be completely non-stardard and I'm worried that may cause some problems I cannot foresee now.</p>

<p>It looks like "the trend" inspired also by flux is to have some top component manage all the data and have the subcomponents access the proper data via one-way data binding. Of course just because this architecturale style is popular does not mean that is right for me, but I don't want to fight against the framework.</p>

<p><strong>The questions</strong></p>

<p>So the main questions are:</p>

<ul>
<li>may a sub-component getting the data by itself (of course through a service) be a problem?</li>
<li>is the second solution that I described "wrong" in some basic way that I'm not able to spot now?</li>
<li>is there a way for case 1 to let the transcluded code access the component elements (by that I mean moving the ng-repeat inside the component and letting the transcluded code access the reference to the ng-repeat scope)?</li>
<li>do you have any alternative suggestion to build this thing?</li>
</ul>