在路由组件中绑定“＆”方法

Question

Consider this simplified Angular 1.5.x component (all in 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 clicking the component button, the count variable is being update ('&' onUpdate is binded well).

Now I would like to have a route to the component from ui.router:

$stateProvider.state({
    name: 'state1',
    component: 'mainComponent',
    url: "#"
  });

Navigating to the state, results in Cannot read property '2' of null , removing the onUpdate member fix the error but break the binding.

What am I doing wrong? What is the way to bind callback methods of components when using ui.router route to components.

jsfiddle

Answer 1

似乎当前不支持使用“ resolve”绑定回调，请参见： https ： //github.com/angular-ui/ui-router/issues/2793