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。所以这显然是一个时间问题。看起来事情按此顺序发生：

更新指令的$ scope.model。
点燃活动。
处理此事件。
更新父级的$ 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/

希望对你有用：）

Answer 2

问题是您正在使用事件（即时），双向绑定使用Angular $digest循环。如果不是使用$on和$emit而是使用$watch函数呢？

在你的指令中，你会这样做：

$scope.$watch("MyValue", function(newValue, oldValue) {
  console.log("MyValue: " + $scope.MyValue);
});

在您的控制器中，您所要做的就是删除SendUpdate。

AngularJS指令范围不及时绑定

2 个答案: