angularjs directive - transclude non working as expected

Question

I'm writing a submenu directive, but I'm unable to use transclude properly for some reason. I've read and watched some videos, but it still doesn't work on my app and I can't figure out why.

Here's how I call the directive:

<my-submenu>
  <div ng-click="test()">Test</div>
  <div ng-click="test2()">Test 2</div>
  <div ng-click="test3(id, type)">Test 3</div>
  <div ui-sref="test ({id: id})">Test 4</div> 
</my-submenu>

and the directive js is:

  {
    link: linkFunction,
    restrict: 'E',
    replace: true,
    transclude: true,
    templateUrl: './directives/submenu.tpl.html'
  }

and the directive template is:

<div>
    <!-- Menu Icon -->
    <div class="icon ion-plus"></div>
    <!-- Menu -->
    <div>
        <div ng-transclude></div>
    </div>
</div>

Now, I though that using transclude and telling the directive template where to transclude, I should be able to add content to the directive template as well as content where I call if from my parent, and have it compiled togheter, but it is not doing that.

The resulting compiled code is the following:

<my-submenu>
 <div>
  <div ng-click="test()">Test</li>
  <div ng-click="test2()">Test 2</li>
  <div ng-click="test3(id, type)">Test 3</li>
  <div ui-sref="test ({id: id})">Test 4</li>
 </ul>
</my-submenu>

and as you can see, the Icon before the transclude is gone and not displayed at all. Why?

What am I doing wrong with the transclude? thanks

Answer 1

I do this with the same way as your and it works properly..

My directive:

myApp.directive('toolbarItem', function() {
return {
    transclude:true,
    restrict: 'E',
    scope: {},
    link: function(scope, element, attrs) {
    },
    templateUrl:'/toolbarItem.html'
}

});

And my template:

<div class="item" ng-transclude></div>