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 DAYS
• Middle, created with ng-repeat - one DAY
• Bottom, created with ng-repeat - many TIME BLOCKS

angular .directive('dateTimeBlocks', [function dateTimeBlocksDirective () {}]) .directive('dayBlock', [function dayDirective () {}]) .directive('timeBlock', [function timeBlockDirective () {}])

I wanted to create middle and bottom directives with isolated scopes and only pass the data that I want to modify inside.

But it seems to unable to compile "Multiple directives [dateBlock, dateBlock] asking for template on: ..."

Any input would be greatly appreciated.

Answer 1

This line causes that error:

<date-block data-date-block="datePeriod"></date-block>

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:

<date-block date-block="datePeriod"></date-block>

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 <div> for the element form. Like this: <div data-date-block="datePeriod"></div>

Answer 2

Just in case anyone else comes here, you can also get this error if you have a template and templateUrl in the same directive.

i.e:

...
        template: '<div>Hello world</div>',
        templateUrl: "MyTemplate.html",
...

Hope that helps someone, the error message doesn't immediately point you to this.