AngularJS多指令资源争用

Question

我正在尝试用angular构建一个指令.

这是掠夺者

我想把它分成3个指令:

• 顶级的祖父指令.- 很多天
• 中间,用ng-repeat创建 - 一天
• 底部,使用ng-repeat创建 - 许多TIME BLOCKS

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

我想用隔离的范围创建中间和底部指令,并且只传递我想要在其中修改的数据.

但它似乎无法编译"多个指令[dateBlock,dateBlock]要求模板:..."

任何投入将不胜感激.

Answer 1

此行导致该错误:

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

原因是各种因素的综合.首先,AngularJS总是正常化指令声明,所以data-date-block(或者x-date-block,data:date:block等)实际上是当作date-block.因此,上述行相当于:

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

现在,该dateBlock伪指令被声明restrict: 'AE',因此它可以作为元素或属性应用.因此,上面的行导致AngularJS将dateBlock指令应用于元素两次.

这本身不会导致错误,但是dateBlock声明了一个模板,而AngularJS不允许一个元素有2个模板(无论如何它都没有意义,AngularJS应该选择哪个模板？),所以它会抛出一个错误.

有几种方法可以解决它.

1. 将指令限制为E使AngularJS不data-date-block作为指令处理.

2. 将隔离的范围属性重命名dateBlock为其他内容.

3. 使用指令的属性形式并<div>用于元素表单.像这样:<div data-date-block="datePeriod"></div>