Thanks a lot for the detailed response and the plunker!
At first I was excited about that solution, but unfortunately my use case
is yet a little more complex:
In terms of the plunker: How do you manage if there's another directive
like "superList" wrapped around "myList" and you want to pass the children
inside the usage of "<super-list>" down to "<my-list>"?
I thought about it a while, tinkered with the code, haven't got it working
and now feel like my brain is tied in knots.
On Wednesday, January 1, 2014 11:43:33 PM UTC+1, Daniel Tabuenca wrote:
>
> I’ve spent some time with the angular code today looking at how
> transclusion is implemented, and it can get pretty complicated.
>
> The ng-transclude directive is pretty simple, it just takes the
> transclude function injected into the current context and calls it.
> However, when you have a hierarchy of parents some without transclusion,
> and some with, it can get pretty difficult to figure out what the right
> transclude function and scope should be.
>
> Strictly speaking, what you are trying to do should not work (based on the
> documentation). The definition of ng-transclude states:
>
> Directive that marks the insertion point for the transcluded DOM of the
> nearest parent directive that uses transclusion.
>
> In your situation the ‘nearest parent directive that uses transclusion
> would be the ng-repeat. So it is hard to tell if this is a bug, or just
> undefined/unsupported behavior based on your particular use. Also, even if
> it did find the right transclude function, it would be bound to the wrong
> scope, not letting you access item since your directive uses an isolate
> scope and the transclude function would always be bound to the non-isolate
> scope.
>
> Like I said though, ng-transclude directive is actually quite simple, so
> it’s easy to make your own that you can pass the actual transclude function
> to use from within your own directive. For example:
>
> app.directive('myTransclude', function() {
> return {
> link: function(scope, element, attr) {
> var transclude = scope.$eval(attr.myTransclude);
> transclude(scope, function(dom) {
> element.append(dom);
> });
> }
> }
> });
>
> Then in your directive you could use it like:
>
> app.directive('myList', function() {
> return {
> restrict: 'E',
> transclude: true,
> replace: true,
> scope: {
> items: '='
> },
> template: [
> '<div>',
> ' <ul ng-style="listStyle">',
> ' <li ng-repeat="item in items">',
> ' <a href="{{item}}.htm" my-transclude="transcludeFn"></a>',
> ' </li>',
> ' </ul>',
> '</div>'
> ].join(''),
> compile: function($element, $attr) {
> return function(scope, element, attr, controllers, transclude) {
> scope.transcludeFn = transclude;
> scope.listStyle = {
> 'background-color': 'red'
> }
> }
> }
> }
> });
>
> Notice the difference with the my-transclude directive is you have to
> pass it in an expression to a transclude function, and you need to put the
> transclude function in scope in the link function. The my-transclude
> directive will then be able to read this function from the scope and use it
> regardless of other directives or transclude functions in-between. Another
> advantage for your case is you can pass the transclude function the current
> scope, so your code can access the item variable from the ng-repeat.
>
> Here is a plunker of your initial example modified to work with the custom
> transclude directive:
>
> <http://plnkr.co/edit/8U3xp2mnv4Gt5crKHf0Y?p=preview>
> http://plnkr.co/edit/8U3xp2mnv4Gt5crKHf0Y?p=preview
>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
