动态地将属性指令添加到AngularJS中的transclude指令

Question

我试图动态地将属性Directive添加到transclude指令。

例如，模板将按如下方式开始：

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

事件发生后（例如点击），它会添加一个属性Directive，例如：

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

我使用以下JavaScript执行此操作：

div = angular.element("#demoParentDirective .container").clone();
div.attr('some-directive','');
div = $compile(div)($scope);
angular.element("#demoParentDirective .container").replaceWith(div);

然而，这导致：

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

我已经创建了一个关于我在Plunker尝试做的事情的简化演示，以展示我是如何做到的：

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

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

更新

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

Creating a 'tab-away' attribute Directive with AngularJS

Answer 1

在您的子指令中添加transclude可修复Plunk中的问题

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