AngularJS call callback after update two way binding values in component

Question

  myApp.component('example', {
    template: '<button type="button" ng-click="$ctrl.click()">click me</button>',
    bindings: { value: '=', callback: '&' },
    controller: function () {
      this.click = function () {
        this.value = 'clicked';
        this.callback();
      }.bind(this);
    },
  });

  myApp.component('useExample', {
    template: '<example value="$ctrl.value" callback="$ctrl.callback()"></example>',
    controller: function () {
      this.callback = function () { alert(this.value); }.bind(this);
    },
  });

Here are two components, while the second one use the first one.

The first component change this.value and then call callback. But when the second one alert(this.value), it got empty value instead of 'clicked' first time. It seems that the this.value in useExample did not be updated when the callback is triggered.

I want get new value instead of old one.

I have attempted to change this.callback() in example to something like $timeout(function () { this.callback(); }.bind(this), 0), and it works. But I think there should be some better way to do so.

So, my question is what is the best way I should do to make useExample read new this.value in the callback.

-- Update 1 --

I would prefer not to change the given interface.

-- Update 2 --

aha, i just searched out this topic: AngularJS: Parent scope is not updated in directive (with isolated scope) two way binding . It seems that this question is duplicate to that one. and i have read posts on that question, it seems $timeout is the best(?) way, wt*.

Answer 1

The problem is that the watcher that binds the value from child scope to parent scope executes on a micro-thread (fiber) subsequent to the invocation of the function in the expression binding.

The solution is to expose the value as a local in the expression binding:

myApp.component('example', {
    template: '<button type="button" ng-click="$ctrl.click()">click me</button>',
    bindings: { 
        callback: '&' 
    },
    controller: function () {
      this.click =  () => {
        this.value = 'clicked';
        //EXPOSE this.value as $value
        this.callback({$value: this.value});
      };
    },
});

In the above example, the value is exposed as $value.

Use the exposed value as an argument of callback function:

myApp.component('useExample', {
    template: '<example callback="$ctrl.useCallback($value)"></example>',
    controller: function () {
      this.useCallback = (v) => { alert(v); };
    },
});

Because the value is provided as an argument of the callback, the value is immediately available.

The DEMO on JSFiddle.