0

我使用以下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 的传递共享，并且可以与我使用双向绑定的所有其他对象一起正常工作。

4

1 回答 1

1

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

$timeout(function () {
    uiVisibility.overlayLoaderVisible = false;
    uiVisibility.resultVisible = true;
}, 1100);
于 2017-12-05T20:57:16.830 回答