vlio20 vlio20 - 4 months ago 15x
AngularJS Question

Angular: calling transclude directive function from within the transcluded component

I want to create a component which will have a transcluded part, here is an example:


As you can see when clicking the do button nothing happens.

Is there any way to run transcluded controller function from a component which is placed within the transcluded part.

Here is the HTML:

<panel> // trans is the name of the controller of panel
<button ng-click="trans.do()">do</button> //transcluded part


you can achieve that if you manually transclude the element and attach the scope function to it:

compile: function(tElement, tAttrs) {
  var parentElement = tElement.parent();
  return function(scope, element, attrs, ctrl, transclude) {
    transclude(scope.$new(), function(clone) {
      clone.bind('click', function() {

as shown in this tutorial. see also this fiddle.