在AngularJS动态添加的属性指令到transclude指令 [英] Dynamically adding an attribute Directive to a transclude Directive in AngularJS

问题描述

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

I'm attempting to dynamically add an attribute Directive to a transclude directive.

例如，模板会开始如下：

For example, the template would start off as follows:

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

在事件发生时，它会再有一个属性指令增加，如（如点击）：

After an event takes place (eg. a click), it would then have an attribute Directive added, such as:

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

我用下面的JavaScript来做到这一点：

I'm using the following JavaScript to do this:

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做一个剥离下来的演示，以显示我是如何做的：

I've created a stripped down demo of what I'm trying to do in Plunker to show how I'm doing it:

http://plnkr.co/edit/xIKwJqKFbvs6DVnJrDUh?p=$p$ PVIEW

任何帮助将是AP preciated。谢谢你。

Any help would be appreciated. Thanks.

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

As requested, I've created a follow-up question asking if there is a better way to achieve what it is I'm trying to achieve:

<一个href=\"http://stackoverflow.com/questions/30024053/creating-a-tab-away-attribute-directive-with-angularjs\">Creating一个'标签外卖'与AngularJS

推荐答案

添加transclude您的孩子的指令修复该问题在你普拉克

Adding transclude to your child directive fixes the issue in your Plunk

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

这篇关于在AngularJS动态添加的属性指令到transclude指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！