在一个遗留项目中，我想创建一个使用 transclude 的新指令。

指令代码的精简版本是：

模板是：

该指令是这样使用的

我知道解决方法是在范围内使用对象而不是原始值（ng-model 内 ng-transclude）。但这对我来说是没有选择的。这是一个丑陋的、编码不良的遗留代码，直接依赖于作用域上的这些属性。

我可以在指令中做些什么来使 html 无需更改即可工作吗？

我有一个指令，它包含一些 HTML 以提供一个人造上下文菜单。用法是这样的：

这将绑定一个事件侦听器#my-element，右键单击该事件侦听器将显示context-menu偏移量$scope.getOffset返回的内容。

一切正常，除了插值字符串{{ label }}没有扩展。假设 的$scope.label值为'ABC'。您看到的不是“ABC”，而是“{{ label }}”。但是，ngClick 似乎绑定正确。

请参阅此 plunkr 以获取代码和演示：http ://plnkr.co/edit/QDVAHkhrfsNpRcjTwCpM?p=preview

为什么是这样？

我将尽我所能解释我的问题 - 请耐心等待。

这整件事是文件选择的指令：

该指令有一个 ng-transclude 组件，其中包含一些指令，包含在它们自己的 div 中。

父指令：

ng-transclude 内容：

ng-transclude 内容（视觉）：

当我单击突出显示部分中的任意位置时，会触发违规（dropbox）指令中的单击事件。

当然，问题是什么导致它触发以及如何让它停止。它应该仅在单击带有 dropbox 指令的元素时触发。

好的，我发誓我已经到处搜索了这个问题的答案。我找到的每个答案几乎但不完全是我正在寻找的。

目标

我正在尝试编写一些指令，让我干掉我展示收藏的方式。最终目标是能够在视图或其他指令中执行如下操作：

md-grid-tile-*所有这些都来自 angular-material，并用它们的内容做花哨的嵌入。 profile-card是一些包含嵌入内容的任意自定义指令。例如，我有一张普通卡来显示个人资料信息，但我想根据我放置的位置在其上放置不同的操作按钮。

我正在尝试创建index指令，它的作用就像一个非常集中的 ng-repeat。在这个例子中：

• 元素上的 attrsmd-grid-tile告诉它event使用isPublicof重复每个true。
• 在profile-card元素上，它将找到与包含元素匹配的所有eventOwner对象。然后它将重复这些对象引用的对象。event_idevent.$idprofileeventOwner

问题

我连接到数据源没有问题，我遇到的问题是：

• 在 DOM 中的正确位置创建多个元素
• 包含内容的重复元素

出于代码示例的目的，我正在简化数据源。 mockProvider将替换为基于index-*attrs 创建集合的服务。

尝试#1

我仍然无法弄清楚为什么我不能让这种方法发挥作用。ng-repeatattr 正确附加，但没有重复。

尝试#2

这重复了一堆东西，但随后爆发：[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. 似乎重新编译以某种方式丢失了嵌入的内容？我还看到其他 SO 评论由于效率低下而对此提出警告。

尝试#3

最后，我尝试了一个天真的重新实现ng-repeat. 这已经最接近了，但仍然无法正常工作，并且需要更多代码才能使其与ng-repeat.

如何？？？

我完全走错了吗？是否有捷径可寻？

在编译服务的 Angular 文档中（从第 412 行开始），有对传递给指令链接函数的 transclude 函数的描述。

相关部分内容如下：

其中（第 212 行）：

futureParentElement：定义cloneLinkingFn将向其添加克隆元素的父级。

• 默认值：$element.parent()resp。分别$element为 .transclude:'element'transclude:true

• 只需要允许包含非 html 元素（例如 SVG 元素）的 transclude 以及在传递 时，因为当这些元素在其常用容器之外定义时（例如 like ）cloneLinkinFn，需要以特殊方式创建和克隆。<svg>

• 另请参阅directive.templateNamespace属性。

然而，我看不到重点futureParentElement。它说

定义 cloneLinkingFn 将向其添加克隆元素的父级。

但是你这样做cloneLinkingFn本身就是这样的：

如果不首先定义克隆函数，就不能使用 transclude 函数。

什么是正确的用法/用途futureParentElement？

我正在开发一组角度指令来驱动我正在为知识库应用程序开发的工具栏。

我遇到的问题是让我的父指令处理嵌套在其中的子指令，该子指令与父指令上的模板有关。

我试图有一个这样的概念，

-工具栏->按钮组->->按钮

所以我有三个指令

xyz 工具栏 xyz 工具栏按钮组 xyz 工具栏按钮

工具栏指令是限制 A，仅属性。按钮组和按钮是 Restrict E（仅限元素）。

每个指令都有独立的范围，（我通过指令中的控制器链接传递东西。）

但问题是我想使用按钮组指令（内联）中的模板并让它包含任何按钮。

例如，我有这样的标记（这是 asp.net MVC 中的主模板），它是一个部分视图，它被加载到工具栏将呈现的标题中。

现在我有一个 kb-toolbar 指令

然后是按钮组

最后是按钮

所以基本问题是 kb-toolbar-button-group 呈现无序列表，但不包含子级。因此，我需要在该指令的模板“”中添加一些内容，以使其包含 kb-toolbar-button 在其中。

我有一个myList指令，它包含了它的内容。当我尝试将一个<my-list>元素嵌套在另一个<my-list>.

JS 小提琴：http: //jsfiddle.net/fqj5svhn/

指令：

该指令的示例用法：

渲染的内容：

如您所见，内部的列表项myList似乎被外部嵌入myList。我想要发生的事情：

建议？

这是我的代码

我的 index.html：

transclude 变量是undefined和 ctrl 变量是proto__: Object。我需要将父范围注入到嵌入范围中。transclude 变量未定义。我哪里错了。

我的角度版本是 1.1.5

谢谢。

假设这个指令：

我想我可以像这样简单地创建指令函数：

但是由于Transclusion is the process of extracting a collection of DOM element from one part of the DOM and copying them to another part of the DOM, while maintaining their connection to the original AngularJS scope from where they were taken.（来自文档），范围不像我想象的那样工作。

所以我尝试了这个工作，除了“一些错误”部分是重复的：

如果我删除它不起作用el.append(clone);。

使嵌入内容共享指令模板范围的最佳方法是什么？

我有一个指令，它本质上是一个复杂的标签标签，它包含一个输入元素并将输入框的 ng-model 作为参数。

在升级到 Angular 1.4 之前，点击指令会更新 ng-model 并触发指令内的 watch。

现在，点击指令仍然会影响输入框，但指令内的值不受影响。

我希望能深入了解导致这种变化的原因以及如何解决它。

小提琴