CODEWITHSUNDEEP
angularjs
ekstro
ekstro

Reputation: 481

AngularJS transclude doesn't work

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?

Upvotes: 5

Views: 1269

Answers (2)

Chintan Pathak
Chintan Pathak

Reputation: 301

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.

Upvotes: 0

ved p
ved p

Reputation: 68

Change your template in the directive to:

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

Upvotes: 5

Related Questions