javascript - 在AngularJS中将属性Directive动态添加到Transclude 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

最佳答案

在子指令中添加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.");
      }
    }
  });

关于javascript - 在AngularJS中将属性Directive动态添加到Transclude Directive，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30018941/