问题标签 [transclusion]

我正在研究一个基本指令，该指令创建一个适合 Bootstrap 的 div 网格。您给它一个项目集合，并可选择指定它可以包含的列数。它是嵌入的，因此您可以定义为每个项目显示的模板。

我将集合分成行，然后有嵌套的转发器，其中第一个创建每一行，第二个创建每一列（然后嵌入该项目的内容）。它在这个简单的场景中运行良好。

问题在于嵌入的内容，我有时需要调用一个函数或从父范围访问一个项目。例如，假设我想格式化显示名称，或添加点击处理程序。

因为这会创建多个嵌入范围，所以我必须通过链接来取消嵌套范围，$parent直到最终找到它。

这也有效，但它很尴尬并且违反了得墨忒耳法则，这很重要，因为如果我将来在内部改变它的工作方式，它可能会破坏嵌入的内容。我怎样才能改进它以避免这个问题？

功能齐全的 plunk。

我目前有 2 个指令：

1. 创建文本框和工具栏 div 的编辑器指令。
2. 嵌入到编辑器中的粗体按钮

标记

编辑器指令

粗体按钮指令

editor指令使用第三方插件，该插件提供了一种formatCommand()更改 textarea 值的方法。

粗体按钮指令通过编辑器的控制器触发此方法。

现在，每次插件更改 DOM 时，它都会引发一个onPostUpdateDOM事件，我使用该事件来获取新值并将其分配给编辑器指令中的范围：

这真的很好用。按下按钮，值发生变化。

然而，该插件还通过键盘快捷键提供 DOM 操作。当 DOM 被更改时，该scope.content = elem.find('textarea').val();行不起作用，因为它发生在 Angular 之外。将该行包装在一个$apply作品中，但随后formatCommand()来自按钮指令的调用会引发“应用已在进行中”错误。

这是“安全应用”反模式的案例吗？！

我在创建一个包装该指令所应用的元素（及其子元素）的指令时遇到了一些麻烦。考虑到 AngularJS 中许多其他常见的事情是多么容易，我不明白为什么这个看似常见的场景会如此困难，所以很可能我在这里遗漏了一些东西。

我想要做的是将一个选择元素包装在一个 div 中。我正在使用 transclude 来保留原始选择元素及其内容，但我无法让它正常工作。

HTML 如下所示：

我的指令如下所示：

生成的 HTML 如下所示：

当然，这不是我想要的。为什么我的选择元素的属性被添加到包装 div 而不是我使用 ng-transclude 属性指定的元素？select 元素需要保留 ng-options 和 ng-model 属性。

我需要做什么才能做到这一点？

我创建了一个“tessellate”指令，可以让您包装多个 div。

它一次需要一个 div 并将其附加到指定列数中最短的列以创建镶嵌/马赛克效果。

在此处查看 plunkr：http://plnkr.co/edit/ur0bVCFRSz1UbRHeLjz8?p= preview

问题是当模型改变时，ng-repeat 使用 div在 DOM中出现的顺序而不是模型中的顺序来重绘元素。您可以看到项目首先正确排序，单击后将Add第一列中的项目水平排序，然后是下一列中的项目，依此类推。

如何防止 ng-repeat 使用 DOM 顺序重绘元素？我已经尝试添加orderBy item.id，但它没有帮助。

我有一个非常简单的设置：

和

plunker 在这里：http ://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku

嵌入本身正在工作，但{{title}}唯一在指令的模板中被替换。然而，即使指令在其范围内有一个变量，被嵌入元素
的内部仍然是空的。这是为什么？{{title}}title

我正在为 select 元素创建一个新指令。作为最佳实践，我想从服务器接收一些选项和一个我想在客户端代码中创建的选项，例如“搜索所有汽车”。

这是我希望它看起来如何的一个示例：

重要的是“搜索所有汽车”的值为空。

但即使我在选择中添加了一个空元素（参考其他 SO 帖子），它仍然给了我一个不需要的选项：

这是一个使用带有 transclude 和 replace 的 Angular 指令的问题/错误的 plunker 示例。

有人对如何解决这个问题提出建议吗？

我还在这里向 Angular 团队添加了一个问题。

编辑：

我想将此作为指令的原因是我想决定是否应该有“搜索所有汽车”选项，具体取决于它在我的应用程序中的实现位置。

EDIT2： Angular 团队确认这是一个错误。“看起来根本原因是如果在初始设置后添加了未知选项，那么它将不会替换生成的未知选项” - lgalfaso。

当我尝试通过 $scope 对象将事件从我的指令发送到嵌套指令时，就会出现问题。例如$scope.broadcast('event')，子指令不接收事件，但是当我使用 $rootScope 对象时，它可以工作，例如$rootScope.broadcast('event').

TL；DR：为什么这不起作用：http ://plnkr.co/edit/27qYiHOilpVABSwMI0Fb?p=preview当它起作用时：http ://plnkr.co/edit/o91yFKnQzHp7edUTTkJE?p=preview

编辑：在 angular.js 版本 1.3.0 及更高版本中，这不再是问题！！！

我有兴趣通过组合包装在 Angular.js 指令中的可重用图形元素来构建复合 SVG。例如我可能有：

我在哪里定义以下指令：

问题是 SVG 元素似乎没有被正确地嵌入。在另一个 StackOverflow 问题中似乎有一个线索，这主要是因为 SVG 节点没有在 Angular.js 中正确创建。

在进一步探索之后，我发现了这个解决方案，它涉及使用辅助函数将相关的 DOM 元素替换为正确创建的 SVG 节点，例如：

但是，我需要在任何地方都使用它似乎是不可取的，并且我希望将解决方法尽可能地保留在 bug 的本地，直到它被修复。

我的问题是以下是否是一个合理的解决方法：

这适用于Plunker！

以这种方式重新定义现有的 SVG 元素指令对我有效吗？

聚合物中是否有类似 angularjs 指令的 transclude 属性的东西？是什么让我可以在模板中的特定位置包含一些元素？

我想实现以下目标：

可以表达为：

我不确定这是否是聚合物的任务，或者这是否是使用聚合物的典型方式。我在问，因为我开始喜欢聚合物，我想保持惯用思维。

我正在尝试创建一个指令，将 ng-transclude 值添加到 html 模板中的输入字段值属性：

我创建的指令：

寻找将ng-transclude值添加到输入元素中的 value 属性的东西

模板：

目前我得到这个 html 输出：

但我真的需要这个 html 输出：