AngularJS 双向数据绑定被 setTimeout 取消

达雷尔·霍尔特

我使用以下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 的传递共享,并且适用于我使用双向绑定的所有其他对象。

弗兰克·莫迪卡

$timeout服务注入到您的服务中,然后使用它。它将为您触发摘要:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章