javascript - AngularJS 双向数据绑定(bind)被 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>

使用这个非常精简的 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;
    }
]);

以及我的服务模块中的此片段:

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

我的问题是，当上面的setTimeout()中的uiVisibility.overlayLoaderVisible和uiVisibility.resultVisible的值发生变化时，没有任何结果发生在用户界面上，但我知道它会执行，因为我已经使用控制台日志记录对其进行了测试。如果我仅用这两行替换超时，那么它们将执行，但它是同步的，因此 View 中每行更新之间会有一秒钟左右的时间。

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

我将这两个值放入一个关联数组中，以考虑 JavaScript 的传递共享，并且与我使用双向绑定(bind)的所有其他对象配合良好。

Answer 1

将 $timeout 服务注入(inject)到您的服务中，并使用它。它将为您触发摘要:

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