AngularJS指令范围不及时绑定

Question

我的AngularJS指令遇到了绑定时间问题.它的控制器看起来像这样:

controller: function($element, $scope)
{
    $element.find("input").bind("blur", function()
    {
        SendUpdate();
    });

    $scope.Subtract = function()
    {
         Add(-$scope.step);
    }

    $scope.Add = function()
    {
        Add($scope.step);
    }

    function Add(amount)
    {
        $scope.model = parseInt($scope.model) + parseInt(amount);
        console.log("Model: " + $scope.model);
        SendUpdate();
    }

    function SendUpdate()
    {
        $scope.$emit("ProcessUpdate");
    }
}

到目前为止,一切正常,从100开始,加10,打印出Model:110,如预期的那样.但是,当事件由提供模型绑定的变量的父范围处理时,它在事件触发时尚未收到更新的值:

$scope.$on("ProcessUpdate", function()
{
    console.log("MyValue: " + $scope.MyValue);
});

打印出MyValue:100,即使它是$ scope.MyValue,它绑定到指令的模型变量(我也使用"="绑定字符).

事实上,该值正在更新.如果我按下一个打印出相同内容的按钮:

console.log("MyValue: " + $scope.MyValue);

它打印出MyValue的正确值:110.所以这显然是一个时间问题.看起来事情按此顺序发生:

1. 更新指令的$ scope.model.
2. 点燃活动.
3. 处理活动.
4. 更新父级的$ scope.model.

我需要的是4在1之后立即发生,因为当事件被触发时我需要父范围是最新的.

我应该采用不同的方式吗？我不想通过事件传递更新的值,因为任何数量的这些指令都可以触发,并且它们需要全部处理父范围.我不想弄清楚改变了什么,并相应地注入它.我只想在父作用域收到指令的新值后触发事件.

谢谢.

Answer 1

请尝试下面的代码

$scope.$on("ProcessUpdate", function() {
    $timeout(function() {
        console.log("MyValue: " + $scope.MyValue);
    });
});

即使超时为零,在插值和DOM渲染完成之前也不会执行.这种行为在这里有更详细的解释:

http://ejohn.org/blog/how-javascript-timers-work/

希望对你有用:)