AngularJS 指令范围未及时绑定(bind)

Question

我的 AngularJS 指令存在绑定(bind)时间问题。它的 Controller 看起来像这样:

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，如预期的那样打印出型号:110。但是，当事件由提供模型绑定(bind)到的变量的父范围处理时，在事件触发时它还没有收到更新的值:

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

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

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

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

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

1. 更新指令的 $scope.model。
2. 触发事件。
3. 处理事件。
4. 更新父级的 $scope.model。

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

我应该采用其他方式吗？我不想通过事件传递更新的值，因为这些指令中的任何数量都可能被触发，它们都需要处理父范围。我不想弄清楚发生了什么变化并相应地注入(inject)它。我只想在父范围收到指令的新值后触发事件。

谢谢。

Answer 1

试试下面的代码

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

即使超时为零，它也不会在插值和 DOM 渲染完成之前执行。此处更详细地解释了该行为:

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

希望对你有用:)