Dynamically adding an attribute Directive to a transclude Directive in AngularJS

Question

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>

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);

However, this results in:

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

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=preview

Any help would be appreciated. Thanks.

Update:

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:

Creating a 'tab-away' attribute Directive with AngularJS

Your child directive doesn't have transclude property. So when you replace element with that directive it has ng-transclude inside the clone. Really not clear what you are really trying to do. Demo is likely too strpped down ... or there maybe there's a better way to do whatever you are trying to do — charlietfl
– charlietfl, Commented May 3, 2015 at 21:05
Essentially I want to add a directive that can handle key presses for the element (and it's children) it's added to. It's to handle when someone tabs away from a control (eg. a collection of elements). I only want the directive to apply when something has been toggled on (hence the need to apply the directive dynamically). An ng-blur directive doesn't help here because it's when they leave one of many elements. It's kind of a modified ng-blur. — greggannicott
– greggannicott, Commented May 3, 2015 at 22:06
I really encourage you to ask perhaps another question about what you really are trying to accomplish. Compiling and re-compiling the DOM in order to apply one directive doesn't seem like a very good approach — New Dev
– New Dev, Commented May 3, 2015 at 22:22
Yeah, since applying it to the project itself, it is bringing about other issues. It's getting late where I am, so perhaps I'll write a slightly higher level question tomorrow. Thanks all. — greggannicott
– greggannicott, Commented May 3, 2015 at 22:27
That's why I didn't provide an answer...the whole process looks very flaky in demo — charlietfl
– charlietfl, Commented May 3, 2015 at 23:05

shivas · Accepted Answer · 2015-05-03 21:33:56Z

1

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

answered May 3, 2015 at 21:33

shivas

92310 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charlietfl Over a year ago

brlliant! bet that was hard to figure out

greggannicott Over a year ago

Thank you, both. I don't know whether shivas copied you @charlietfl or not, but thank you both anyway. It seems to have done the trick. I was hoping it was something that simple, but never actually expected it.

shivas Over a year ago

@charlietfl i did see your comment as soon as i posted the answer. Thanks

New Dev Over a year ago

@greggannicott, of course it's simple. It's as simple as a bandage on a gunshot wound. You are likely doing something improperly or against best practices, thus running into these issues. That's why charlietfl commented in order to gain more insight into what you are trying to accomplish, and this answer only provided a bandage.

Collectives™ on Stack Overflow

Dynamically adding an attribute Directive to a transclude Directive in AngularJS

Update:

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related