Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS: ngTransclude and access scope of ngRepeat

We are in the process of upgrading our application to Angular 1.3.0. In doing so, we ran into a few issues, most of which seem to boil down to the behavior of ngTransclude inside of ngRepeat.

We have a directive that repeats a bunch of items, with a container around them, but does not own the children of that container. For instance, here is a simplified example:

<div ng-controller="myController">
    There are {{items.length}} items.
    <div my-directive items="items">
        This item's name is {{item.name}}
    </div>
</div>

Internally, the directive contains <li ng-repeat="item in items" ng-transclude></li>, among other things.

Prior to the update, this worked fine. The repeated, transcluded elements are in a scope that inherits from the scope created by ngRepeat. As of the update, the items are in a scope that inherits from the controller, and as far as I can tell, there is no way to access the scope created by ngRepeat.

Here are two JS Bin examples:

  • Old (1.3.0-beta.1) behavior: http://jsbin.com/kalutu/1/edit
  • New (1.3.0) behavior: http://jsbin.com/gufunu/1/edit

How can I achieve the old behavior, or some semblance of it, in Angular 1.3.0? If this is the intended behavior of ngTransclude, how can I repeat a bunch of child nodes without knowing what they are?

like image 350
Chris Avatar asked Oct 20 '22 00:10

Chris


1 Answers

https://github.com/angular/angular.js/issues/8182

It was decided for 1.3 that ng-trasclude would not pull scope from the directive. There is a work-around on the linked pages,

https://github.com/angular/angular.js/issues/7874 https://github.com/angular/angular.js/issues/7874#issuecomment-47647528

This is the expected behavior.

like image 73
Rick Avatar answered Oct 22 '22 15:10

Rick