Javascript 在AngularJS中将属性指令动态添加到transclude指令

我正在尝试将属性指令动态添加到transclude指令

例如，模板的开头如下所示：

<div class="container">
  <div ng-transclude></div>
</div>

然而，这导致：

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-transclude="">

错误：[ngTransclude:orphan]在模板中非法使用ngTransclude指令！未找到需要转换的父指令。要素：

我已经创建了一个精简的演示，演示了我在Plunker中要做的事情，以展示我是如何做到的：

任何帮助都将不胜感激。谢谢

更新： 根据要求，我创建了一个后续问题，询问是否有更好的方法来实现我想要实现的目标：

---

将transclude添加到您的child指令中可以解决Plunk中的问题

angular.module('demo')
.directive('demoChildDirective', function() {
    return {
      restrict: "A",
      priority: 500,
      transclude: true,
      link: function(scope, element, attributes) {
        console.log("Child Directive Applied.");
      }
    }
  });

---

您的子指令没有

transclude

属性。因此，当您用该指令替换元素时，它在克隆内部具有

ng transclude

。真的不清楚你到底想做什么。演示可能太慢了。。。或者可能有更好的方法来做你想做的事情本质上我想添加一个指令，可以处理它添加到的元素（及其子元素）的按键操作。它是用来处理当有人从控件（例如，元素的集合）以外的选项卡。我只希望在打开某些东西时应用该指令（因此需要动态应用该指令）。ng blur指令在这里没有帮助，因为它是在它们离开多个元素中的一个时发出的。这是一种改进的ng模糊。我真的鼓励你问另一个问题，关于你真正想要实现的目标。为了应用一个指令而编译和重新编译DOM似乎不是一个很好的方法是的，因为将它应用到项目本身，会带来其他问题。现在已经很晚了，也许明天我会写一个稍微高一点的问题。谢谢大家。这就是为什么我没有提供答案…整个过程在demobrlliant中看起来非常脆弱！我打赌这很难理解谢谢你们两位。我不知道希瓦斯是否抄袭了你们@charlietfl，但无论如何还是要谢谢你们。它似乎成功了。我希望事情能这么简单，但从来没有真正预料到。@charlietfl我一公布答案就看到了你的评论。Thanks@greggannicott，当然很简单。这就像枪伤上的绷带一样简单。您可能做了一些不正确或违反最佳实践的事情，因此遇到了这些问题。这就是为什么charlietfl发表评论是为了更深入地了解您正试图实现的目标，而这个答案只是提供了一条绷带。

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-transclude="">

angular.module('demo')
.directive('demoChildDirective', function() {
    return {
      restrict: "A",
      priority: 500,
      transclude: true,
      link: function(scope, element, attributes) {
        console.log("Child Directive Applied.");
      }
    }
  });