AngularJS Multiple Directive Resource Contention

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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>

Method 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply