AngularJS Composite Components

Problem

I’m trying to create a component that contains multiple child components. I’m creating a collection of directives that other developers on my team can use to create custom search forms. For example, they would create markup like:

<search-panel name="myCustomSearch">
<search-field name="dates" type="dateRange"></search-field>
<search-field name="categories" type="categorySelector" data="{{categories}}"></search-field>
</search-panel>

I have a search panel directive and several search field directives. The search panel acts as a container and the search fields each provides a specific type of field (date range, type ahead, category selector, etc). Each search field has a value property in it’s scope and I am trying to figure out a way to have the parent search panel directive have a property in it’s scope that contains a key, value collection of all of the child search fields.

I’ve got both directives rendering correctly, but I’m not sure how to either make the search-panel aware of/have access to all the child components.

Problem courtesy of: Ian Muir

Solution

You can require in search-field directive a search-panel controller using require:'^searchPanel'

Then in link function you’ll have a link to that controller, so those directives could add themselves into some array (I assuemm each search field has its isolated scope):

link: function(scope, elem, attrs, spCtrl) {
spCtrl.fields.push({name: attrs.name, scope: scope});
}

(ofcourse, you could add not whole scope, but some object, then watch for changes and update value field of that object.

Solution courtesy of: Valentyn Shybanov

View additional discussion.