Angular：使用模板或模板Url时的区别答案

【问题标题】：Angular: difference when using template or templateUrlAngular：使用模板或模板Url时的区别
【发布时间】：2014-03-20 01:02:32
【问题描述】：

我在使用 template 属性而不是 templateUrl 属性时遇到了一个奇怪的问题。

在后者的情况下，我可以在单个元素上定义具有隔离范围的多个指令或 transclude 选项。这按预期工作，我没有收到任何错误。

然而，当简单地复制模板并在指令中将其设置为 template 时，Angular 突然开始抱怨多个指令要求对同一元素进行隔离范围或嵌入。

看到我的这个plunkr。它在控制台中引发错误。但是，如果您要替换（在 scripts.js 中）

template: "<ul kendo-menu k-orientation=\"'vertical'\" k-direction=\"'right'\"></ul>",

与

templateUrl: 'menu.html'

该指令有效（尝试右键单击文本）。 HTML 文件的内容与字符串中的内容完全相同。

有没有人知道为什么会出现这种不一致？

编辑：为避免混淆，我需要有 transclude 选项，因为我想重用这个元素并能够配置在每个单独使用的地方显示哪些元素。

【问题讨论】：

【解决方案1】：

显然，这种不一致已在较新版本的 Angular 中得到修复。

我们正在使用1.0.8，并且正确的行为（当多个指令需要对同一元素进行嵌入时抛出错误）仅在使用template 选项时才会发生。使用 templateUrl 选项时，不会引发错误，并且指令按预期工作（这仍然让我感到困惑）

编辑：使用compile 函数修复它并删除replace 选项。工作示例here。

【讨论】：

【解决方案2】：

问题来自transclude: true，您还忘记在模板中添加<li> 元素。如果定义了replace: true，它将用其子元素替换原始元素。

它对我有用，无论是使用 template 还是 templateUrl : Updated Plunker

编辑： 有一个未解决的问题：https://github.com/angular/angular.js/issues/4357

【讨论】：

【解决方案3】：

我无法重现该问题，但这里的问题实际上是menu 指令定义中的replace: true。

这意味着kendo 和menu 指令都在尝试依次替换元素。保留 menu 包装器可以解决问题：http://plnkr.co/edit/vGhEVNfz35elCtxXSMxO?p=preview

【讨论】：

感谢您的回答，但删除替换并不能解决问题。 Angular 不会抛出错误，但指令不起作用。奇怪的是，当使用templateUrl 并保留replace 选项时，该指令有效。