AngularJS transclude doesn't work

Question

This example works well with AngularJS 1.1.5 (it's going to append it into div), but with 1.2.5 not (it's leaves html content without append).

https://egghead.io/lessons/angularjs-transclusion-basics

app.directive("panel", function() {
    return {
        restrict: "E",
        transclude: true,
        template: '<div class="panel" ng-transclude>This is a panel component</div>'
    }
})

AngularJS 1.1.5: http://plnkr.co/edit/BLe56D9YZxSIAiJ31wW0 ("This is..." appears as expected) AngularJS 1.2.5: http://plnkr.co/edit/h6dUrXXXBOQUtzsJqT4S ("This is..." doesn't appears)

In 1.1.5 "transclude: true" works as expected (text is appended to panel), but in > 1.2.0 not.

Any help?

In Angular v1.3.15 ng-transclude still doesn't work, but in 1.1.5 it works. — Mikhail Sokolov
– Mikhail Sokolov, Commented Apr 9, 2015 at 6:54

ved p · Accepted Answer · 2014-01-01 08:47:15Z

5

Change your template in the directive to:

template: '<div class="panel" >This is a panel component</div><div ng-transclude></div>'

answered Jan 1, 2014 at 8:47

ved p

686 bronze badges

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

Comments

Chintan Pathak · Accepted Answer · 2014-12-21 05:42:01Z

0

In fact, the exact behavior is now captured like so:

template: '<div class="panel"> This is a panel component <div ng-transclude></div></div> '

i.e. If you want the button in the panel, and the panel text also showing in the panel.

btw., I dont know yet why.

answered Dec 21, 2014 at 5:42

Chintan Pathak

3012 gold badges6 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS transclude doesn't work

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