我的 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。所以这显然是一个时间问题。看起来事情是按以下顺序发生的:
- 更新指令的 $scope.model。
- 触发事件。
- 处理事件。
- 更新父级的 $scope.model。
我需要的是 4 在 1 之后立即发生,因为当事件被触发时我需要父范围是最新的。
我应该采用其他方式吗?我不想通过事件传递更新的值,因为这些指令中的任何数量都可能被触发,它们都需要处理父范围。我不想弄清楚发生了什么变化并相应地注入(inject)它。我只想在父范围收到指令的新值后触发事件。
谢谢。
最佳答案
试试下面的代码
$scope.$on("ProcessUpdate", function() {
$timeout(function() {
console.log("MyValue: " + $scope.MyValue);
});
});
即使超时为零,它也不会在插值和 DOM 渲染完成之前执行。此处更详细地解释了该行为:
http://ejohn.org/blog/how-javascript-timers-work/
希望对你有用:)
关于AngularJS 指令范围未及时绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16969742/