close
  menu      DavidRodenas
CONTACT  

AngularJS ngTranscludeLocals

This contribution allows to rename current template locals into a new locals inside a transclussion sections.


<!-- HeroListComponent.tpl.html -->
<div ng-repeat="hero in $ctrl.heros">
    <ng-transclude ng-transclude-locals="{hero: hero}"></ng-transclude>
</div>

<!-- OverviewHeroList.tpl.html -->
<ul>
<hero-list>
    <li>{{hero.name}}</li>
</hero-list>
</ul>

The idea of this PR to avoid use $parent in cases like this:

<!-- HeroListComponent.tpl.html -->
<div ng-repeat="hero in $ctrl.heros">
<ng-transclude></ng-transclude>
</div>

<!-- OverviewHeroList.tpl.html -->
<ul>
<hero-list>
    <li>{{$parent.hero.name}}</li>
</hero-list>
</ul>

that could cease to work in cases like:

<!-- OverviewHeroList.tpl.html -->
<ul>
<hero-list>
    <li ng-if="$parent.hero.power > 5">{{$parent.hero.name}}</li>
</hero-list>
</ul>

and instead allow to use it:

<!-- HeroListComponent.tpl.html -->
<div ng-repeat="hero in $ctrl.heros">
    <ng-transclude ng-transclude-locals="{hero: hero}"></ng-transclude>
</div>

<!-- OverviewHeroList.tpl.html -->
<ul>
<hero-list>
    <li>{{hero.name}}</li>
</hero-list>
</ul>

It is in the IceBox, so meanwhile we can use this workaround:

<!-- HeroListComponent.tpl.html -->
<div ng-repeat="hero in $ctrl.heros">
<ng-transclude></ng-transclude>
</div>

<!-- OverviewHeroList.tpl.html -->
<ul>
<hero-list>
    <li ng-init="hero = $parent.hero">{{hero.name}}</li>
</hero-list>
</ul>