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

Question

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

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

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

事件发生后（例如单击），它将添加一个属性指令，例如：

<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

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

更新：

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

使用 AngularJS 创建一个“tab-away”属性指令

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.");
      }
    }
  });