[英]AngularJS Two-way data binding canceled out by setTimeout
I've got this snippet of HTML using the Controller As
syntax: 我已经使用
Controller As
语法获得了以下HTML代码段:
<div ng-class="{'hide': !autoDeploy.uiVisibility.overlayLoaderVisible, 'show': autoDeploy.uiVisibility.overlayLoaderVisible}" />
<div ng-class="{'animate-top hide': !autoDeploy.uiVisibility.resultVisible, 'animate-bottom show': autoDeploy.uiVisibility.resultVisible}">
<button ng-click="autoDeploy.btn_extractFormData()">click</button>
with this very stripped down controller: 这个非常精简的控制器:
angular.module("gms.autoDeploy").controller('AutoDeployController', ['$scope', 'AutoDeployService',
function ($scope, AutoDeployService) {
var model = this;
// two-way data binding model to view
model.uiVisibility = AutoDeployService.getUIVisibility();
// Pull the data from our data model arrays
function btn_extractFormData() {
AutoDeployService.extractFormData();
}
model.btn_extractFormData = btn_extractFormData;
}
]);
and this segment from my service module: 这是我的服务模块中的细分:
var uiVisibility = {
resultVisible: false,
overlayLoaderVisible: false
};
function getBuildResult() {
$http({
url: 'https://jenkins...com/job/...',
method: 'GET',
headers: {
'Accept': "*/*",
'Authorization': 'Basic ...'
}
})
.then(function (res) {
//stuff happens here
})
.catch(function (res) {
// stuff also happens here
});
setTimeout(function () {
uiVisibility.overlayLoaderVisible = false;
uiVisibility.resultVisible = true;
}, 1100);
}
// return this service (contains the objects that we want to be public)
return {
getUIVisibility: getUIVisibility,
extractFormData: extractFormData
};
}
My issue here is that when the values of uiVisibility.overlayLoaderVisible
and uiVisibility.resultVisible
are changed in the above setTimeout()
, nothing happens on the UI but I know it executes because I've tested it with console logging. 我的问题是,当在上述
setTimeout()
中更改uiVisibility.overlayLoaderVisible
和uiVisibility.resultVisible
的值时,UI上什么也没有发生,但我知道它可以执行,因为我已经用控制台日志记录对其进行了测试。 If I replace the timeout with just the two lines then they will execute, but it's synchronous, so there's a second or so between each being updated in the view. 如果我只用两行替换超时,那么它们将执行,但它是同步的,因此在视图中每行更新之间有大约一秒钟的时间。
My question: Is there some mechanism here preventing the two-way data binding when the value is modified in the async setTimeout()
method? 我的问题:在异步
setTimeout()
方法中修改值时,这里是否有某种机制可以防止双向数据绑定?
I put the two values into an associative array to account for JavaScript's pass-by-sharing, and works fine with all other objects that I use two-way binding on. 我将这两个值放入关联数组中,以说明JavaScript的传递共享,并与我使用双向绑定的所有其他对象配合使用。
Inject the $timeout
service into your service, and use that instead. 将
$timeout
服务注入到您的服务中,并使用它。 It will trigger a digest for you: 它将为您触发摘要:
$timeout(function () {
uiVisibility.overlayLoaderVisible = false;
uiVisibility.resultVisible = true;
}, 1100);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.