AngularJS多指令资源争用

我想把它分成3个指令：

前，盛大母公司指令。 - 许多DAYS
中间，NG-重复创建 - 一个DAY
底部，与NG重复创造的 - 许多时间块

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

我想用隔离范围创建中间和底部指令，并只传递我想要修改的数据。

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

任何输入将不胜感激。

来源

2014-11-23 GogromaT

这行导致该错误：

<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应该选择哪个模板？），所以它抛出一个错误。

有几种方法可以解决它。

限制指令E让AngularJS不把data-date-block作为指令。
将隔离范围属性dateBlock重命名为其他内容。
使用指令的属性形式，并使用<div>作为元素形式。就像这样：<div data-date-block="datePeriod"></div>

来源

2014-11-23 03:40:35

哇，什么是俯视。我试图想象每个指令属性的组合：■非常感谢您发现这一点！：]对于我的错误信息是误导性的，我无法弄清楚那一个 – GogromaT 2014-11-23 05:30:12

不客气，很高兴帮助！ – 2014-11-23 15:57:37

万一其他人来这里，你也可以，如果你有相同的指令模板和templateUrl得到这个错误。

即：

... 
     template: '<div>Hello world</div>', 
     templateUrl: "MyTemplate.html", 
...

希望帮助别人，该错误信息不会立即指向你这一点。

来源

2017-06-01 13:20:45 garryp

我们该如何解决这个问题？ – shivadarshan 2017-08-08 07:11:30

使用其中一个或另一个。 – garryp 2017-08-08 10:04:33

AngularJS多指令资源争用

回答

相关问题