CODEWITHSUNDEEP
angularjsangularjs-directive
RullDawg
RullDawg

Reputation: 221

Angular Selective Transclude

Does anyone know a way to have a directive that can transclude the body of the directive selectively?

For example, if I have the following div and directive of myWrapper.

<div data-my-wrapper="foo">
    <h1>Hello World</h1>
</div>

I'd like to have code in my directive that is like this pseudo code.

if (foo.locked) {
   // user a static template saying that the item is locked.
}
else {
   // Tranclude the body content
}

Is there a way to direct to the directive what content should be transcluded? Or is there a recommended way to have the equivalent of a if/then/else that could allow me to swap out the content instead of the body of the element that the directive sits in?

Upvotes: 1

Views: 134

Answers (1)

miqh
miqh

Reputation: 3664

You can gain access to transcluded content inside the link function of a directive by using making use of the fifth argument, which happens to be a transclude linking function. Remember also to set the transclude property of the directive.

function link(scope, iElement, iAttrs, controller, transcludeFn) { ... }

Here's a crude demonstration of the transclude linking function at work: JSFiddle.

Glad that helped.

NOTE:

Please be aware that if you're using a version of AngularJS prior to 1.2.x that the transclude linking function is instead available as the third argument to the compile property of a directive. This has since been deprecated as pointed out by the official documentation.

Upvotes: 0

Related Questions