Question

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

我想把它分成3个指令：

Top，grand-parent指令。 - 许多 DAYS
中间，使用ng-repeat创建 - 一个 DAY
底部，使用ng-repeat创建 - 许多 TIME BLOCKS

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

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

但似乎无法编译＆＃34;多个指令[dateBlock，dateBlock]要求模板：...＆＃34;

非常感谢任何输入。

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

有几种方法可以解决它。

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

Answer 2

如果有其他人来到此处，如果您在同一指令中有模板和templateUrl，也会出现此错误。

即：

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

希望能帮到某人，错误信息并不能立即指向您。

AngularJS多指令资源争用

2 个答案: