Error when routing to a component with output bindings

[thielmal]

See this Plunker: http://plnkr.co/edit/MppbR9UAlw7JkBW0JdD8.

When routing to a component that has any output bindings ('&'- bindings), ui-router fails with this error:

TypeError: Cannot read property '2' of null at https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js:7096:54 at Array.map (native) at scopeBindings (https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js:7096:7) at getBindings (https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js:7101:17) at Array.map (native) at getComponentInputs (https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js:7109:21) at config.templateProvider (https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js:7074:34) at invokeResolveFn (https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js:2786:37) at processQueue (https://unpkg.com/angular@1.5.8/angular.js:16383:28) at https://unpkg.com/angular@1.5.8/angular.js:16399:27

I understand from this issue that these bindings are not supported, but I still think, that ui-router should be able to route to these components, ignoring the output bindings, or at least display a more descriptive error message.

Of course, supporting these bindings would be another option. Maybe I'm approaching the component based architecture wrong, but I find myself writing several "wrapper"-components that wrap around the reusable other components to make ui-router able to route to them. I feel that this wrapping could more cleanly be handled with ui-router. Any comments on support for output bindings?

Regards,

Lucas

[christopherthielen]

ui-router should be able to route to these components

definitely agree. Putting on the 1.0 roadmap

Any comments on support for output bindings?

I'm more open to supporting & bindings now than I originally was, but I'm still not sure what "supporting & bindings" really means.

[thielmal]

What I initially tried was something like:

$stateProvider.state('home', { resolve: { output: () => { return (output) => { console.log(output); } } }, component: 'home' })

,where the home component has a binding:

{ output: '&' }

The problem with this lies in the way the template would have to be generated, being aware of the parameters that are passed to the output function from inside the component.
I don't have a good idea on how to solve this, other than supporting only selected patterns, like the one suggested by Todd Motto here. I guess this would be somehow similiar to the Angular 2 approach.

[christopherthielen]

being aware of the parameters that are passed to the output function from inside the component.

Yep, the & function binding implies a lot more than "pass this function down to the binding". It has implications for the context of the function (in components, it's invoked in the context of the parent) and also the parameter name mappings.

What I initially tried was something like:

If you just want to pass the function down, it works fine as an object < binding.

http://plnkr.co/edit/xJD0qgct6u8PaIjQ1LWc?p=preview

but I'm not sure you can do something useful in a "Resolve callback function". (shrug)