AngularJS setTimeout 取消了双向数据绑定

Question

我使用 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>

使用这个精简的控制器：

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;
    }
]);

我的服务模块中的这个片段：

    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
    };
}

我的问题是，当 uiVisibility.overlayLoaderVisible 和 uiVisibility.resultVisible 的值在上述 setTimeout() 中更改时，UI 上没有任何反应，但我知道它执行因为我已经使用控制台日志记录对其进行了测试。如果我只用这两行替换超时，那么它们就会执行，但它是同步的，所以在视图中更新每行之间有大约一秒钟的时间。

我的问题：在异步setTimeout()方法中修改值时，这里是否有某种机制阻止双向数据绑定？

我将这两个值放入一个关联数组中以说明 JavaScript 的传递共享，并且可以很好地处理我使用双向绑定的所有其他对象。

Answer 1

将 $timeout 服务注入您的服务，然后改用它。它将为您触发摘要：

$timeout(function () {
    uiVisibility.overlayLoaderVisible = false;
    uiVisibility.resultVisible = true;
}, 1100);

AngularJS setTimeout 取消了双向数据绑定

AngularJS Two-way data binding canceled out by setTimeout

javascript

angularjs

asynchronous

synchronous

two-way-binding