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

问题描述

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

这是plunker

我想把它分成 3 个指令:

• 顶级的祖父母指令.- 许多天
• 中间，使用 ng-repeat 创建 - 一个 DAY
• 底部，使用 ng-repeat 创建 - 许多时间块

<代码>有角的.directive('dateTimeBlocks', [function dateTimeBlocksDirective () {}]) .directive('dayBlock', [function dayDirective () {}]).directive('timeBlock', [function timeBlockDirective () {}])

我想创建中间和底部指令隔离作用域，只传递我想在里面修改的数据.

但是好像无法编译多个指令 [dateBlock, dateBlock] 要求模板:..."

不胜感激任何输入.

解决方案

此行导致该错误:

原因是多种因素的组合.首先，AngularJS 总是规范化指令声明，所以 data-date-block(或 x-date-block、data:date:block 等) 实际上被视为 date-block.因此，上面这行相当于:

现在，dateBlock 指令是用restrict: 'AE' 声明的，因此它可以作为元素或属性应用.因此，上面的行导致 AngularJS 将 dateBlock 指令应用于元素 twice.

这本身并不会导致错误，但是 dateBlock 声明了一个模板，而 AngularJS 不允许一个元素有 2 个模板(这没有任何意义，AngularJS 应该使用哪个模板选择?)，所以它会抛出一个错误.

有几种方法可以修复它.

1. 将指令限制为 E 以便 AngularJS 不会将 data-date-block 视为指令.

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

3. 使用指令的属性形式，元素形式使用

   .像这样:<div data-date-block="datePeriod"></div>

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.

解决方案

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>

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