javascript - 动态添加属性指令到 AngularJS 中的嵌入指令

Question

我正在尝试动态地将属性指令添加到嵌入指令中。

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

<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

如有任何帮助，我们将不胜感激。谢谢。

更新:

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

Creating a 'tab-away' attribute Directive with AngularJS

Answer 1

将 transinclude 添加到您的子指令中可以修复 Plunk 中的问题

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