Error when routing to a component with output bindings #3099

Closed
thielmal opened this Issue Oct 20, 2016 · 3 comments

Projects

None yet

2 participants

@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 christopherthielen added this to the 1.0.0-final milestone Oct 20, 2016
@christopherthielen
Contributor

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
thielmal commented Oct 20, 2016 edited

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
Contributor

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment