angularjs - using ng-bind to define transcluded content on a directive that uses transclusion -

consider some-directive following definition object:

{    restrict: "e",    transclude: true,    template: "<div>content: <div ng-transclude></div></div>" } 

i can use way:

<some-directive>{{somecontent}}</some-directive> 

and not surprisingly, somecontent placed has to.

but want able use way also:

<some-directive ng-bind='somecontent'></some-directive> 

here example of problem

it's not clear me why must use ng-bind on {{ }}, if must, 1 way solve transclude entire element using transclude: "element".

this, however, ignores template property, you'd need manually add in compile function. and, you'd need make priority of directive higher of ngbind (which has default priority 1):

return{   restrict: "e",   transclude: "element",   priority: 10,   compile: function(telem, tattrs){     var template = "\       <div class='some-directive'>\         <div class='some-directive-header'>my custom component</div>\         <div class='some-directive-body' ng-transclude></div>\       </div>";      telem.replacewith(template);   } }; 

your forked plunker