AngularJS多个指令资源争 [英] AngularJS Multiple Directive Resource Contention

问题描述

我试图建立与角度指令。

I am trying to build a directive with angular.

下面是 plunker

我想把它分为3个指令：

I wanted to split it into 3 directives:

• 顶，祖父母指令。 - 许多的天


• 中东与NG重复创造的 - 有一个日期


• 底部，与NG重复创造的 - 许多的一日3次

• Top, grand-parent directive. - many DAYS
• Middle, created with ng-repeat - one DAY
• Bottom, created with ng-repeat - many DAY TIMES


角
.directive（'dateTimeBlocks'，[功能dateTimeBlocksDirective（）{}]）.directive（'dayBlock'，[功能dateTimeBlocksDirective（）{}]）
.directive（'timeBlock'，[功能dateTimeBlocksDirective（）{}]）


我想创造与中部和底部指令
孤立的范围，只有通过我想里面修改数据。

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

但似乎无法编译
多指令[dateBlock，dateBlock]要求的模板：...

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

任何投入将大大AP preciated。

Any input would be greatly appreciated.

推荐答案

这行导致该错误：

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

的原因是多种因素的组合。首先，AngularJS一直正常化指令声明，所以数据的最新块（或 X-日期块，数据：日期：块等）实际上是被视为日期块。因此，上面的行相当于：

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>

现在，在 dateBlock 指令声明了限制：AE，因此它可以作为应用元素或属性。因此，导致AngularJS上述行应用 dateBlock 指令元素的两次。

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.

这本身不会导致错误，但 dateBlock 声明了一个模板，AngularJS不允许的元素有2个模板（它没有意义无论如何，这模板应AngularJS选择呢？），所以它抛出一个错误。

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. 限制指令电子，这样AngularJS不把数据的最新块作为指令。

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

重命名隔离scope属性 dateBlock 到别的东西。

Rename the isolated scope property dateBlock to something else.

使用该指令的实体形式，并使用＆LT; D​​IV＆GT; 为元素的形式。像这样：＆LT; D​​IV数据的最新块=datePeriod＆GT;＆LT; / DIV＆GT;

Use the attribute form of the directive and use <div> for the element form. Like this: <div data-date-block="datePeriod"></div>

这篇关于AngularJS多个指令资源争的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！