javascript - Pass data to transcluded element -

i want create directive organizes displays data grouped date. want able specify directive display individual rows. in perfect world (but nice , pretty)

friday, oct 28     [some directive html]     [some directive html]     [some directive html] saturday, oct 29     [some directive html] sunday, oct 30     [some directive html]     [some directive html] ... 

this doesn't work, if have better approach please tell me, hoping able along these lines:

app.directive('dateorganized', [function(){     return {         template:             '<div>' +                 '<div ng-repeat="organizeddate in organizeddate">' +                     '<div>{{organizeddate.date | date}}</div>' +                     '<div ng-repeat="item in organizeddate.items">' +                         '{{rowdirectivehtml}}' +                     '</div>' +                 '</div>' +             '</div>',         scope: {             organizeddates: '=',             rowdirectivehtml: '='         }         ...     }; }])  app.directive('itemrow', [function(){     return {         template: '<div>{{item.data}}</div>',         scope: {             item: '='         }     }; }]); 

then use this:

<div data-organized organized-dates="stuff" row-directive-html="<div item-row item=\"item\" />" /> 

i know super ugly (and doesn't work, i'm sure working few tweaks) asking, there better way this?

this question more complicated might appear, let's break down.

what building directive accepts partial template - <div item-row item="item" /> - and template uses (or linked against scope with) inner variable - item - not defined in outer scope user; meaning defined directive , user "discovers" reading documentation of directive. typically name such "magic" variables prefixed $, e.g. $item.

step 1

instead of passing template html-as-string via attribute binding, pass contents , transclude content. transcluding allows bind transcluded content against arbitrary scope:

<foo>   <div>my item is: {{$item}}</div> </foo> 

.directive("foo", function(){   return {     scope: {},     transclude: true,     template: "<h1>i foo</h1><placeholder></placeholder>",     link: function(scope, element, attrs, ctrls, transclude){        scope.$item = "magic variable";        transclude(scope, function(clonedcontent){         element.find("placeholder").replacewith(clonedcontent);       });     }   }; }); 

the above place template <div>my item is: {{$item}}</div> (could template specify) directive foo decides, , link against scope has $item defined.

step 2

but added complexity of directive uses ng-repeat, accepts template, , template directive receives needs used template of ng-repeat.

with approach above, not work, since time link runs, ng-repeat have transcluded own content before had chance apply yours.

one way address manually $compile template of foo instead of using template property. prior compiling, have chance place intended template needed:

.directive("foo", function($compile){   return {     scope: {},     transclude: true,     link: function(scope, element, attrs, ctrls, transclude){        scope.items = [1, 2, 3, 4];        var template = '<h1>i foo</h1>\                       <div ng-repeat="$item in items">\                         <placeholder></placeholder>\                       </div>';       var templateel = angular.element(template);        transclude(scope, function(clonedcontent){         templateel.find("placeholder").replacewith(clonedcontent);          $compile(templateel)(scope, function(clonedtemplate){           element.append(clonedtemplate);         });       });     }   }; }); 

demo