问题标签 [angularjs-ng-transclude]

我应该什么时候使用transclude: 'true'，什么时候使用transclude: 'element'？我在角度文档中找不到任何内容transclude: 'element'，它们非常令人困惑。

如果有人能用简单的语言解释这一点，我会很高兴。每个选项的好处是什么？它们之间的真正区别是什么？

这就是我发现的：

在 compile 函数中，您可以借助 transclude 链接函数来操作 DOM，或者您可以使用任何 HTML 标签上的 ngTransclude 指令将 transcluded DOM 插入到模板中。

和

这包含了整个元素，并在编译函数中引入了一个transclude链接函数。您无法在此处访问范围，因为尚未创建范围。Compile 函数为可以访问范围的指令创建一个链接函数，而 transcludeFn 允许您触摸克隆的元素（已被嵌入）以进行 DOM 操作或使用绑定到其中的范围的数据。供您参考，这用于 ng-repeat 和 ng-switch。

这是您可以看到的一个 plunker 示例：http: //plnkr.co/edit/NQT8oUv9iunz2hD2pf8H

我有一个指令，我想把它变成一个 Web 组件。我已经想到了几种方法来如何使用 AngularJS 实现这一目标，但在其中的一部分方面遇到了困难。我希望有人可以解释我的失误，而不是告诉我另一种方法。

想象一下，您有一个指令组件，它设置了一些带有 css 类的 shell，可能是一些子组件等。但是让用户定义组件的主要内容。类似于以下内容：

list 指令的 HTML 可能类似于以下内容（使用 OOCSS）：

通常，这可以通过将指令范围链接到新内容来在链接函数中解决。它确实适用于其他组件。然而，引入 ng-repeat 似乎打破了控制的那部分。据我所知，合适的位置可能是 compile 函数，但文档说 transcludeFn 参数将被弃用，所以我不确定如何继续。

我还应该注意，在使用 beta AngularJS 时，要么出现错误，要么出现新的范例，因为这不再是问题。似乎嵌入的内容总是可以访问指令范围以及外部控制器范围。

我非常感谢对此的任何启示。

我有这个名为“面板”的自定义指令。

我的问题是我无法渲染嵌套面板指令。请参阅 plunkr http://plnkr.co/edit/D0LfQqBViuraSNfmym4g?p=preview for the javascript。

我预计

但相反我得到

正如您将看到的，我的目标是从控制器提供的数据中渲染输出，而不是操纵 dom。我正在探索使用指令作为收集数据并将其提供给控制器的一种方式，这样模板就可以从控制器提供的数据中呈现出来。因此，我正在寻找一种不在 div 上使用 ng-transclude 而是使用 $compile 和/或 transclude(scope, fun...) 的某种组合来实现既定目标的解决方案。我的目标还在于更好地理解如何有效地使用 $compile 和 transclude(scope, fun...)。

我正在尝试添加一个包含左面板和右面板的正文指令。但在这些面板之间，我会有一些 body 指令私有的内容。我目前正在使用transclude=true选项来加载内容。但是，我正在寻找一种使用两个 ng-transclude 的方法。我研究了很多如何解决这个问题，但我找不到一个优雅的解决方案。我不得不在 body 指令的编译步骤中手动添加嵌入的对象。以下是我解决该问题的方法：

身体指令

模板

这是此示例的 JSFiddle。我正在寻找这样的东西：

好用的模板

问题：我做错了吗？有没有推荐的方法来解决这个问题？

我想创建一个包装器指令，用作列表中通知小部件的框架。在那个框架中，我想稍后根据notif对象的属性嵌入一些特定的内容。目前我硬编码了一个div元素。

我在 index.cshtml 中有以下内容：

这是指令规范：

为什么以下工作，即div在紫红色背景中显示嵌入？

...但是如果我像元素一样使用它，紫红色 div 将不再显示。

ng-transclude如果我用作属性或元素有什么区别。（我使用火狐）。

假设我有一个组件：

以及组件的视图：

最后，用法（理论上）：

运行程序后，我想查看<menu-item>Remove</menu-item>我放置的影子根目录<!-- I want put content here -->。我读过有一个<content />组件，但它不是那样工作的（什么也没发生，我只看到<output/>元素）。我也尝试过 ng-transclude 指令但没有成功。

有人可以帮助我并指出正确的方法吗？

我有一个指令可以嵌入原始内容，对其进行解析，并使用原始内容中的信息来帮助构建新内容。它的要点是这样的：

然后，我像这样使用它：

这一切都像这样正常工作。当我尝试使用ng-repeat指令内容内部时会出现问题，如下所示：

当我尝试这样做时，没有项目。任何人都知道为什么这不起作用，或者是否有更好的方法来完成同样的事情？

我发现这篇关于设计自定义选择框的很酷的文章。我决定将 jquery 函数包装在一个指令中：

html:

但由于某些原因，它什么也没做

发现了这个github 问题，它谈到了相同的主题，但在这里并没有真正解决我的问题。

form是否可以在角度指令模板中使用元素？例如，我可能想要完全生成表单以节省重复编码 - HTML 显示数据，指令自动生成编辑。我会发现它对于重复很多的编辑页面很有用：

和指令：

然而，当我运行它时，输出不包含，并且form元素被剥离：

• <span>{{item.name}}</span>不包含在
• 元素被<form>完全剥离

我究竟做错了什么？

如何从 transclude 中的另一个控制器更改指令变量（在指令控制器中）？