Transclude not working in angular js

Question

I have created a directive called first. Like below

 <div first>
        <p>aaaaaa11111</p>
</div>

angular js like

var testdirective = angular.module("testdirective",[]);

testdirective.directive('first', function()
{
    return
    {
        transclude: true,
        template: '<div> This is my directive content</div>'
    }
});

on running the file "

aaaaaa11111

" content is not showing y.....

demkalkov · Accepted Answer · 2015-06-23 09:23:35Z

2

You are using the wrong template (api ref).

template: '<div> This is my directive content <ng-transclude></ng-transclude></div>'

answered Jun 23, 2015 at 9:23

demkalkov

5114 silver badges9 bronze badges

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

Comments

Amit Thakkar · Accepted Answer · 2015-06-23 09:34:46Z

1

You are not using ng-trasclude directive into your template. Here is update code:

HTML:

<div ng-app="testdirective">
    <div first>
        <p>aaaaaa11111</p>
    </div>
</div>

JavaScript

var testdirective = angular.module("testdirective",[]);
testdirective.directive('first', function() {
    return {
        transclude: true,
        template: '<div> This is my directive content<span ng-transclude></span></div>'
    }
});

You can checkout JSFiddle link. Its having running demo.

For more details you can checkout blog http://codechutney.in/blog/angularjs/transclude-in-angularjs/.

answered Jun 23, 2015 at 9:34

Amit Thakkar

7871 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

Transclude not working in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related