AngularJS 多指令资源争用

Question

我正在尝试使用 Angular 构建指令。

这是plunker

我想把它分成 3 个指令:

• 最高祖 parent 指令。 - 许多天
• 中，使用 ng-repeat 创建 - 一天
• 底部，使用 ng-repeat 创建 - 许多时间 block

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