Clever Geek Handbook

Resource competition with multiple AngularJS directives

I am trying to create a directive with angular.

Here is the plunker

I wanted to split it into 3 directives:

  • Top directive, grand-parent. - many DAYS
  • Medium created with ng-repeat - one DAY
  • Bottom created with ng-repeat - LOTS OF 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 I want to change internally.

But it doesn't seem to be able to compile "Several directives [dateBlock, dateBlock] request a template for: ..."

Any input is greatly appreciated.

+3


source to share


2 answers


This line throws this 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>


The directive is now dateBlock

declared with restrict: 'AE'

, so it can be applied as an element or attribute. So the above line causes AngularJS to apply the directive dateBlock

to the element twice .

This by itself does not throw an error, but it dateBlock

declares a template, and AngularJS does not allow an element to have 2 templates (it makes no sense, which template should AngularJS choose?), So it throws an error.

There are several ways to fix this.

  • Limit the directive E

    so AngularJS doesn't treat it data-date-block

    as a directive.

  • Rename the isolated scope property dateBlock

    to something else.

  • Use directive attribute form and use <div>

    for element form. For example:<div data-date-block="datePeriod"></div>

+12


source


Just in case someone 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 someone helps, the error message won't immediately point this out.

+1


source






More articles:


All Articles