问题标签 [transclusion]

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

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

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

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

为什么是这样？

我有几个菜单指令，外部菜单指令里面有一些菜单项元素。底部三个（“注册”、“登录”和“个人资料”）按预期工作。上面的链接由 ng-repeat 生成，该 ng-repeat 循环遍历在其他地方设置的对象数组。当我运行代码时，我发现创建了正确数量的菜单项，但没有显示 ng-repeat 设置的属性。ng-repeat 创建的链接没有路由、图标或标签。

我不明白。我的数据看起来很好，并且嵌入的元素似乎可以访问菜单对象，因为正在输出适当数量的菜单项。

我的数据去哪儿了？

生成的 HTML：

我正在尝试在 angularJS 中对指令进行自定义嵌入，因为我需要将两个单独的元素嵌入到两个单独的位置。

问题在于，尽管某些指令在转入内容上继续工作，例如ng-bind其他指令，例如ng-if或ng-repeat不工作，即使在重新编译具有正确范围的转入元素之后也是如此。

示例： http: //jsbin.com/menakapoma/1/edit ?html,js,output

正如您在示例中看到的那样ng-bind有效，但ng-if即使它们都在同一范围内并访问相同的值，它们也不会。作品的真假状态都没有ng-if。

我相信这是因为ng-if指令被嵌入为注释，但是即使我将嵌入指令的优先级设置为9999并在预链接函数中执行它，它仍然不起作用。

有谁知道如何使这些指令起作用？

在编译服务的 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？

因此，在 Angular2 中，以下内容非常简单：

你得到这个：

但是，如果我想对内容应用格式怎么办？我可以写一个getFormattedContent()函数，如果可以，我用什么代替this.header？

就此而言，我本可以选择format(header)在模板中使用一个format方法，该方法接受一个字符串并以!. 有什么我可以在模板中放入类似于的东西format( <content></content> )吗？显然，我的format方法需要稍微复杂一些，因为<content></content>它不是字符串，但只要我知道它的类型（ElementCollection？？NodeList），这并不是一个特别重要的问题。

显然，有一种解决方法，只需将属性中的所有内容都推入并将内容留空，但我发现这很难看（特别是因为显然无法定义不需要关闭的标签）。

我正在使用 angularjs 1.3.15

我创建了一个像这样的简单指令：

还有另一个要嵌入的指令：

我像这样使用它们（仅适用于 CASE 2）：

这（适用于案例 1 和 2）：

我花了很长时间才弄清楚问题出在哪里。

我在这里错过了什么吗？

当指令通过包含指令被嵌入时，为什么使用编译部分中定义的变量不起作用？

这是Angular中的错误吗？

我猜transclusion会克隆模板，所以在这种情况下，myChildCompile不是链接中使用的对象，即translusion案例？

提前感谢您的任何启发！

我有两个指令，可以说：

第二个：

指令 A 的 HTML：

指令 B 的 HTML：

我想像这样使用它们：

如何使用 require 和 ng-transclude 使它们相互通信并渲染两个模板？例如，我想在directiveB 模板中从directiveA 打印测试变量。我是指令和嵌入的新手。

我想在模板中插入（ transclude）<input>元素。<div>

问题是我得到了：Error: $compile:multidir Multiple Directive Resource Contention我不知道为什么，如果有人能解释我应该如何改进我的代码以使其正常工作，我将不胜感激。

模板：

指示：

用法（HTML）：

我在一个模块中有 2 个指令。其中之一是 templateUrl 属性。在该 templateUrl 中，我引用了另一个指令，该指令又具有一个 templateUrl。

例如

从带有指令的模块：

这是我得到的错误： [ngTransclude:orphan] http://errors.angularjs.org/1.2.28/ngTransclude/orphan?p0=%3Cdivlass%3D%carousel-inner%22%20ng-transclude%3D %22%22%3E

我收到一个关于嵌入的错误，我尝试了一些东西，但没有改变。我以为你们可能有想法。

我有以下产品详细信息组件，用户可以在其中键入产品 SKU。此 SKU 可以是书籍、数字产品、饮料、电视或游戏机。根据该 SKU，将显示详细信息。SKU 只能属于一种类型。

详细信息组件由许多不同的产品类型组件组成。除了在 details 组件中包含所有子产品类型组件，是否可以在用户输入 SKU 并单击show details时动态注入子产品类型组件？

为什么我要注入子组件是因为当添加了新的产品类型（如微波）时，我只需要创建该组件而不修改产品详细信息父组件。