AngularJS Multiple Directive Resource Contention

Question

I am trying to build a directive with angular.

Here is the plunker

I wanted to split it into 3 directives:

• Top, grand-parent directive. - many

Answer 1

This line causes that error:

The reason is a combination of factors. First, AngularJS always normalizes directive declarations, so data-date-block (or x-date-block, data:date:block etc.) is actually treated as date-block. Therefore, the above line is equivalent to:

Now, the dateBlock directive is declared with restrict: 'AE', so it can be applied as either an element or attribute. Therefore, the above line resulting in AngularJS applying the dateBlock directive to the element twice.

That per se doesn't cause the error, but dateBlock declares a template and AngularJS doesn't allow an element to have 2 templates (it doesn't make sense anyway, which template should AngularJS choose?), so it throws an error.

There are several ways to fix it.

1. Restrict the directive to E so that AngularJS doesn't treat data-date-block as a directive.

2. Rename the isolated scope property dateBlock to something else.

3. Use the attribute form of the directive and use

   for the element form. Like this: