I'm building a large input form in angular. To make the application user friendly I have broken the form down into many different sections. I need each section to reside within a different group of an accordion. Each section needs to have validation and a user cannot progress until the required field validation has been satisfied.
In the main page of the app I have added the markup for the accordion. Each section within the accordion is a custom directive. The directive contains the markup for each group (The input form and validation) and it also contains the code to connect to the relevant services to persist state within a db.
Sample code
<uib-accordion close-others="true">
<uib-accordion-group heading="Person Details" is-open="heading1.isOpen">
<div person-details></div>
<button class="btn btn-default btn-sm pull-right" ng-click="heading2.isOpen = !heading2.isOpen">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
<uib-accordion-group heading="Address Details" is-open="heading2.isOpen">
<div address-details></div>
<button class="btn btn-default btn-sm pull-right">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
</uib-accordion>
The difficulty is how to manage what accordion group is open at any time. In the example code above I have a next button to open the next accordion group. However this button needs to reside with the directives themselves in order to manage validation. The problem with this is that the directives then need to know how to control the accordion in order to change the active accordion group - bubble up somehow.
Does anybody have any thoughts on this please? If you think I am going about this is the wrong way please let me know.
Thanks
You need to use a scope variable in your directive(s) that has a two way binding to heading1.isOpen for example. That way the directive will be able to modify the is-open state of its parent directive.
Just search angular docs for directives and isolated scope variables.