问题标签 [transclusion]

我有三个指令：

aiOutter、aiMiddle 和 aiInner。

我的标记如下所示：

只有最外面的指令似乎被选中。我需要做什么才能使用这种继承模式以及能够使用嵌入标记填充最里面的指令？

Plunker：http ://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV

编辑澄清

我按照 PascalPrecht 的建议编辑了我的标记 a（更新后的 plunker 在这里：http ://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV ）

但是，我认为我遇到了范围界定问题。当我按下按钮时，{{name}} 模型应该一直绑定回来，不是吗？目前，只有最里面的范围正在更新。

我认为在涉及指令时我对范围界定感到困惑。

我想为我的输入字段创建一个包装器，其中包含一个输入帮助工具提示。

我正在使用 angular 1.0.7，如果它很重要的话。

我正在使用 transclude: true 以及隔离范围，以便同时允许多个不同字段的错误，并且仍然保持对外部 $scope 的 ng-model 引用。

问题：

当我在输入元素上使用此指令时，输入元素不会克隆（'Transclude'）到指令模板中。

结果，我在 DOM 上得到了一个空的 div 元素，带有一个 ng-transclude 属性。

plunk： http ://plnkr.co/edit/vFB9ih6x2NBmwhAes3Qh?p=preview

代码：

但是，当我将此输入元素包装在跨度或 div 中时，子输入元素被超越就好了，但是我没有在指令中获得对正确外部 ng-model(ctrl) 的引用。

完整代码（链接函数内部的逻辑与问题无关，但我更愿意发布我的完整代码）

我正在开发我的第一个 Angular 应用程序（耶！）。我正在尝试拥有一个可以声明标题、自定义内容和任何数字操作按钮的通用模式组件。下面是背景设置，然后是我的问题在底部。

这是我想使用该指令的方式。

这是指令代码：

...和指令模板：

问题：

1）考虑<select>上面控制器视图中的元素。#i_work用 s 正确渲染<option>就好了。#i_dont_work呈现<select>没有<option>s 的 a。libraryTypes好像不在范围里面<modal>。为什么会这样，我该如何解决？

2) 有没有更好的方法将特定内容转换为多个目标？Google 的 Polymer 项目提供<content />了一个可选[select]属性来提供多个插入目标。Angular有这样的东西吗？（有关更多信息，请参见Polymer 的网站。）

我无法使嵌套的嵌入工作。

有两个指令，它们都声明它们将嵌入其内容。当我嵌套它们时，内部没有任何内容。

这是这个小提琴，它证明了我的问题。

这是代码：

我正在尝试通过指令将模板传递给动态控制器（从指令的角度在运行时已知）。

像这样的东西：

见 jsFiddle

找到并实例化了控制器，但不知何故，将嵌入的模板绑定到它不起作用。我错过了一些订单要求还是有办法将此控制器范围绑定到嵌入模板？

设想

在我的应用程序中，我有多次出现的项目列表。我可以通过单击项目上方或下方的加号按钮来插入新项目。我可以通过单击项目上的减号按钮来删除项目。我称之为“加减列表”或“添加删除列表”。

现有解决方案

目前，我使用每个列表的单个委托单击处理程序来管理项目的添加和删除，该处理程序由控制器管理，这违反了良好的 AngularJS 风格。我希望将此逻辑放在自定义指令中。此外，每个项目（例如加号和减号按钮）上都有一些可以隐藏在指令模板中的脚手架。

具体问题

当使用自定义指令与 ng-repeat、transcludion、定义范围以及在相当复杂的系统（即 Angular 自定义指令）中可能的其他内容时，直觉上应该可以访问的各种内容似乎不可用。即：嵌入的全部意义在于可以访问指令内的父范围。

如果指令模板在 ng-repeat 中包含 ng-transclude 标签，则被转入的内容似乎不会保留其对外部范围（应用程序的范围，而不是指令的范围）的访问权限。然而，如果这是在不使用指令（裸 ng-repeat）的情况下完成的，或者如果指令没有 ng-repeat，则访问按预期工作。

简化示例

我对这个问题做了一个演示，展示了所有三种情况：

http://plnkr.co/edit/np6lTmeTrKioo4kb8SP6?p=preview

请注意，当 transcluding 指令包含 ng-repeat 时，不会出现绿色的“外部范围数据”。显式传递的数据（字段）按预期绑定，但嵌入的要点是我们不必显式传递所有可能绑定的数据。

我正在使用 AngularJS 1.2.0-rc.3。

以前的尝试

我花了一整天的时间在这上面。我没有看到任何人与我的情况完全一样：通常有一些微妙的原因为什么不需要嵌入，或者他们希望访问指令本身内的父范围。我几乎 100% 确定这是一个与范围相关的微妙问题，而且我对 Angular 的了解还不够好，无法巧妙地解决这个问题。由于缺乏更好的方向，我已经（随机地）尝试了许多不同形式的指令范围、嵌入和替换的组合，但结果可想而知。

鉴于：

和指令：

我希望生成的标记是：

而不是当前输出的内容：

我想在初始标记上保留“radio-name”，这样您就可以知道它是一个自定义指令，但我希望生成的嵌入/替换具有语义数据属性“data-radio-name”。谢谢。

我的目标是创建一个editable指令，允许用户编辑附加属性的任何元素的 HTML（请参阅 Plunker：http ://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6 ）

这几乎可以工作，除非我无法获得转入内容的原始原始 HTML 来初始化文本区域。我可以从中获取它的文本clone.text()，但是缺少 HTML 标签，如<H1>,<div>等，因此单击应用而不进行编辑不是幂等的。

该方法clone.html()抛出错误，Cannot read property 'childNodes' of undefined

（这个问题本质上是在较早尝试构建问题之后对问题和代码的全面重写，在 Angular 指令中获取原始嵌入内容）

I'm curious if this is even possible in ember. This is an easy thing to do in angular ( plunkr: http://plnkr.co/edit/O2e0ukyXdKMs4FcgKGmX?p=preview ):

The goal is to make an easy to use, generic, reusable accordion api for api consumers.

The api I want the caller to be able to use is this (just like the angular api):

Here is a working example I wrote using angular:

here's where I'm stuck doing the same with ember:

index.html

main.js

EmberAccordionComponent.js

application.hbs

ember-accordion-header.hbs

ember-accordion-body.hbs

index.hbs

ember-accordion.hbs

--

This is tricky to debug. So putting in the:

and the:

into the:

outputs the following:

• Class.model = undefined (why?)
• Ember.ArrayController

I've tried overriding the private _yield method of Ember.Component as suggested by this article ( http://www.thesoftwaresimpleton.com/blog/2013/11/21/component-block/ ):

but when I do this I still don't have access to accordionPaneObject in my child component scope, and my {{log this.constructor}} now points to: .EmberAccordionHeaderComponent

So it looks like I'm getting somewhere, I just need to go one more level up.

When I try that using this code in EmberAccordionHeaderComponent.js:

I still don't access to accordionPaneObject in, but now I see {{log this.constructor}} outputting .EmberAccordionComponent. So it appears I'm in the right scope, but the data still doesn't bind.

Interestingly enough, if I use any of these variations of reassigning context and controller in my overridden _yield, I can access the data I am after in the console using:

在使用 ngRepeat 时，我有一个从数组中加载四个项目的无序列表。列表项中的锚标记在 ngClick 属性中具有触发消息的功能。像这样使用时，函数调用效果很好：

我创建了一个简单的指令，用于插入带有列表项的无序列表。该列表加载得很好，但我之前提到的相同功能没有启动。代码如下：

这是我的 javascript 和 angularjs 代码：

我也有一个 plnkr，以防你想看看我试图做什么： http ://plnkr.co/edit/ycaAUMggKZEsWaYjeSO9?p=preview

谢谢你的帮助。