javascript - How to set an anonymous child scope setting in angular -

javascript - How to set an anonymous child scope setting in angular -

what right way solve next problem:

i have this:

<div ng-click="!showall">show all</div> <div ng-repeat="foo in foos"> <div ng-click="!showsubitems">do stuff</div> <div ng-show="showsubitems"> <div ng-repeat="bar in foo.bars"> <div>{{bar.stuff}}</div> </div> </div> </div>

and want show go through each bar item , expand changing showsubitems. i've googled around , reply found deals when children scopes have controller. in case don't have explicit controller scopes of children item since basic. there way tell each kid scope should set showsubitems=true?

i tried doing <div ng-show="showsubitems||showall">, can't collapse children items individually 1 time open. set on foo model, seems wrong way of handling since it's adding info model when model doesn't have knowledge or concern ui.

the way can think of without using controllers iterate on kid scopes using $$childhead , set showsubitems true. while works, it's not "correct" access $$childhead since should considered private angularjs. here's how showall looks like:

$scope.showall = function () { var childscope = $scope.$$childhead; while (childscope) { childscope.showsubitems = true; childscope = childscope.$$nextsibling; } };

example: http://jsfiddle.net/jfcks/

a more right solution in sentiment give each foo controller listens "showall" event broadcasted parent scope when show clicked.

example: http://jsfiddle.net/v586a/

javascript angularjs