Chapter 9
restrict:'E',
transclude:true,
replace: true,
templateUrl:'template/accordion/accordion-group.html',
scope:{ heading:'@' },
link: function(scope, element, attrs, accordionCtrl) {
accordionCtrl.addGroup(scope);
scope.isOpen = false;
scope.$watch('isOpen', function(value) {
if ( value ) {
accordionCtrl.closeOthers(scope);
}
});
}
};
});You can see that this directive requires the directive controller from the accordion
directive to appear on an ancestor of this directive's DOM element. The required
directive controller appears as the fourth parameter, accordionCtrl, on the link
function. The accordion-group directive registers itself using the addGroup()
function and calls closeOthers() whenever this group is opened.
Taking control of the compilation process
There are some situations where we need to have more control over how AngularJS
compiles and links an element and its children. Perhaps we wish to load the
directive's template dynamically or we want more control over the transclusion of
elements into a directive's template. In these cases we can terminate the compilation
process then modify and compile the directive's element and children manually.
Creating a field directive
When writing applications that use forms, it quickly becomes apparent that there is
a lot of duplication and redundancy in the amount of boilerplate HTML requires for
each field on the form.
For instance, and for every field there will be an input element and a label element
surrounded by various div and span elements. On these elements, we need to
provide a number of attributes, ng-model, name, id, and for, which are usually very
similar or even identical, and various CSS classes. We also need to display validation
messages for when the input values are invalid.