Question

我有两个指令，其中外部指令使用transclusion。它应该将attr附加到由inner指令生成的外部指令内的内容，但是attach attr似乎不起作用：

我也收到错误：

TypeError: Cannot read property 'childNodes' of undefined

我认为这与此有关。

如果我不使用inner指令并手动将html放在将由inner指令生成的外部指令中，那么一切正常：

这里的实际用例是我有两个指令。其中一个在搜索查询组件中，允许您使用特定语法构建搜索并在键入时对其进行验证，以便您知道是否存在任何语法错误。我还有一个扩展文本组件，其中一个功能是自动完成的。这两个组件都可以单独运行，但我尝试将功能组合在一起，以便我可以使用自动完成的查询构建器。我遇到的问题是，扩展文本组件的所有功能都没有实际添加到搜索查询组件中（就像这里没有将外部指令的任何功能添加到内部指令中一样）。

我在这里做错了什么（为什么我得到那个childNodes错误）？这不是组合两个指令的功能的方式，每个指令都有自己的模板吗？

注意

这是一个基本的骨骼代码示例，它显示了与实际代码相同的问题。实际代码超过1000行，扩展文本和搜索查询组件组合在一起，因此我没有发布，因为有大量代码与此特定问题无关。虽然在这个例子中，我可以在javascript中绑定事件，而不是真正的代码。解决方案需要允许我能够在外部指令的转换过程中绑定指令。
我尝试了transclude: 'element'而不是transclude = true，但当我这样做时，输入甚至没有显示在页面上
我虽然试图这样做，但是我对同一个元素都有两个指令，但是它们都需要有自己的模板，所以据我所知我必须在单独的元素上有这些指令

更新

基于@zeroflagL的建议，我删除了$ compile上使用但是它仍然不起作用

plunker link 3

输入确实有ng-click，并且没有javascript错误，但是单击输入不会触发警报。

Answer 1

element.find('.outer-inputs').append($compile(copyElement)($scope));

您不需要$compile。

compile: function(element, attributes, transclude) {

不推荐在编译函数中使用transclude。

工作示例：

compile: function(element, attributes) {
          return {
            pre: function($scope, element, attributes) {
            },
            post: function($scope, element, attributes, ctrl, transclude) {
              transclude($scope, function(clone) {
                var copyElement = clone.filter('.outer-copy');

                copyElement.find('input').on('click', function() {
                  focus();
                  //$scope.$apply();  only if you change the model.
                });

                element.find('.outer-inputs').append(copyElement);
              });

与问题无关：指令的控制器没用，因为它没有方法。您可以直接在指令中将focus()添加到范围。

修改

在您的示例中，您编译的元素已经编译并且仍在构建中（链接后阶段）。那不行。您有效地尝试更改inner指令。但是，如果指令是相互依赖的，那么outer不应该与inner混淆，或者它们彼此了解。在这种情况下，不需要攻击DOM，因为它们可以以其他方式进行互操作。

当child指令生成内容时，父指令转换不起作用

1 个答案: