directive中的双向绑定，如何立即更新数据

Question

代码如下:

 app.directive('myDirective', function() {
    return {
        scope: {
            number: '=',
            onClick: '&'
        },
        template: '<div ng-click="clickMe()">Click Me!</div>',
        link: function(scope, ele, attr) {
            scope.clickMe = function() {
                scope.number++;
                // scope.$apply() // 加上这句有用但会抛一个异常：$apply() already in progress
                console.log('In Directive: ', scope.number);
                scope.onClick();
            }
        }
    }
});

app.controller('mainCtr', function($scope) {

    $scope.myNum = 0;

    $scope.onClick = function() {
        console.log('In controller: ' + $scope.myNum);
    };

    $scope.$watch('myNum', function(val) {
        console.log('In Watch: ' + val);
    });
});

html上的代码是这样的：

<div my-directive number="myNum" on-click="onClick()"></div>

我猜想的结果是这样的：

In Watch: 1

In Directive: 1

In controller: 1

但实际结果是这样的：

In Directive: 1

In controller: 0

In Watch: 1

想请教下各位大牛directive双向绑定的数据为什么不是立即更新的？怎么做到能同时更新controller中的数据哩？调用$apply()方法可以更新，但是会报一个异常。除此之外还有什么办法？

Answer 1

http://stackoverflow.com/questions/22996096/apply-already-in-progress-with-custom-directive-and-events

Answer 2

写一个延迟吧~
// 貌似angular的绑定需要一定时间，所以scope不是最新值
// 或者这样说，link执行在绑定操作前
// 顺序：scope->controll->compile->link->ngbind->template

Answer 3

在link函数里加一个对scope.number的$watch，将scope.onClick()放入该watch的回调函数中执行。
$scope.$watch('number', function() {
scope.onClick();
});