ng-repeat preventing parent scope from being injected in custom component.

[bgourlie]

I've created a component, VarxaButton, designed to be optionally nested within a directive, VarxaButtonGroup. The VarxaButton constructor takes a VarxaButtonGroup, which is injected as expected in the following scenario:

<div mode="radio" varxa-button-group>
    <varxa-button>Tab One</varxa-button>
    <varxa-button>Tab Two</varxa-button>
    <varxa-button checked="true">Tab Three</varxa-button>
</div>

However, when using ng-repeat, VarxaButtonGroup is always null when injected:

<div mode="radio" varxa-button-group>
    <varxa-button ng-repeat="name in ['Tab One', 'Tab Two', 'Tab Three']">{{name}}</varxa-button>
</div>

I would expect the VarxaButtonGroup instance to be injected even when used in conjunction with ng-repeat.

A repro can be found here: https://github.com/bgourlie/varxa-button. Just run demo.html.

[mvuksano]

@bgourlie Here's a suggestion how to work around your issue for now:

  VarxaButtonGroup(this.injector) {
    injector = injector.createChild([new Module()..bind(VarxaButtonGroup, toValue: this)]);
  }

So, inject the injector itself and replace it with a new injector which has your GroupElement binding.

Not the nicest thing but should work...

instead of toValue you could use toFactory too..

[bgourlie]

Thanks for the workaround @markovuksanovic !

[bgourlie]

@markovuksanovic Turns out that didn't work. A null VarxaButtonGroup is still injected into the VarxaButton constructor.

[mvuksano]

@bgourlie What is the reason for binding your group to null in varxa_ui.dart?

[mvuksano]

@bgourlie Actually it looks like it works correctly if you remove the toValue: null. Was this toValue: null an error or was it supposed to do something useful?

[vicb]

I think the issue is

@Decorator(
  selector: '[varxa-button-group]',
  visibility: Directive.DIRECT_CHILDREN_VISIBILITY,
  map: const {'mode' : '@mode'}
)

Edit:
The group is created in a scope
then ng-repeat creates a new child scope
and the cmp create a new scope (grd child)
The cmp is then not a direct children of the group

[mvuksano]

@vicb see my previous comment. I think we posted at the same time.

[vicb]

Yep, the conclusion is the same.

[mvuksano]

Button group is not a component but a decorator. So shadow dom is not used
for group element.
On 14/05/2014 4:23 PM, "Victor Berchet" notifications@github.com wrote:

Yep, the conclusion is the same.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1034#issuecomment-43046354
.

[vicb]

Buttons are cmp hence not direct children of group

[mvuksano]

@vicb A couple of things.

1. I've been testing agains master branch
2. Directive.DIRECT_CHILDREN_VISIBILITY does not exist in master
3. It looks like setting Directive.DIRECT_CHILDREN_VISIBILITY in this case would have no effect.
4. It seems to work OK if binding toValue:null is removed

[vicb]

2,3. It does https://github.com/angular/angular.dart/blob/master/lib/core/annotation_src.dart#L51
4. If the directive is not visible, it will get it from a parent injector where it is set to null which explains what you see (a new group instance is created on the root scope).

To confirm this behavior you can try to add a second ng-repeat. I expect the added group to be the same as the first (i.e. both button are re-using the same group instance from the root injector)

[mvuksano]

@bgourlie You shouldn't use visibility: Directive.DIRECT_CHILDREN_VISIBILITY. That causes your injectors in your buttons to not see GroupElement. In your application you have something like

rootInjector
    |
    |--> VarxaButtonGroup Injector (visibilty: DIRECT_CHILDREN_VISIBILITY)
                 |
                 |--> ng-repeat injector
                               |
                               |--> button One injector
                               |--> button Two injector
                               |--> button Three injector

You injector associated with VarxaButtonGroup will only be visible to ng-repeat injector but not to the child elements themselves.

I've tested the behavior after removing visiblity parameter and the group elem is provided correctly. I'm closing this for now, if you still have issues feel free to reopen.