Here is a simplified Angular 1.5.x component example that I've set up in a jsfiddle:
appModule.component('mainComponent', {
controller: function() {
var x = 0;
this.broadcast = function() {
this.onUpdate({
count: x++
});
};
this.broadcast();
},
bindings: {
onUpdate: '&'
},
template: '<input type="button" ng-click="$ctrl.broadcast()" value="add"/>'
});
Html (in body)
<main-component on-update="this.count = count"></main-component>
Value in parent: {{count}}
When you click the button in the component, the count variable updates correctly due to the 'onUpdate' binding.
Now I want to incorporate this component into a route using ui.router:
$stateProvider.state({
name: 'state1',
component: 'mainComponent',
url: "#"
});
However, navigating to the state results in an error message saying Cannot read property '2' of null. Removing the 'onUpdate' member fixes the error, but it also breaks the binding.
What am I missing here? How can I properly bind callback methods of components when using ui.router to route to components?