AngularJS由setTimeout取消的双向数据绑定

时间:2017-12-05 20:53:43

标签: javascript angularjs asynchronous synchronous two-way-binding

我使用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.overlayLoaderVisibleuiVisibility.resultVisible的值在上面setTimeout()中发生更改时,UI上没有任何反应,但我知道它已执行,因为我已对其进行了测试控制台记录。如果我用两行替换超时,那么它们将执行,但它是同步的,所以在视图中更新每个之间还有一秒左右。

我的问题:在异步setTimeout()方法中修改值时,是否存在阻止双向数据绑定的机制?

我将这两个值放入一个关联数组中以解释JavaScript的pass-by-sharing,并且可以与我使用双向绑定的所有其他对象一起使用。

1 个答案:

答案 0 :(得分:1)

import requests from bs4 import BeautifulSoup from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets import sqlite3 import sys, getopt, time from PyQt5.QtCore import QTimer import signal # press Ctrl+C to stop the script signal.signal(signal.SIGINT, signal.SIG_DFL) records = [] def scrape_page(url, html): print('scraping page:', url) soup = BeautifulSoup(html, 'html.parser') data = soup.find('div', class_='tablo_dual_board') try: datas = data.text.splitlines() datas1 = list(filter(None, datas)) records.append(datas1) except: pass def process_records(): # add record to database ... print('processed records:', len(records)) # clear the current records del records[:] # re-run after a timeout QTimer.singleShot(60000, run) def run(): print('running scraper...') webpage.start(generate_urls()) def generate_urls(): print('generating urls...') onexurl = "https://1xbahis19.com/en/live/Football/" reply = requests.get(onexurl) soup = BeautifulSoup(reply.content, "html.parser") income = soup.find_all("ul", {"id":"games_content"}) links = soup.find_all("a", {"class": "c-events__name"}) urls = [] for matchlink in links: urls.append("https://1xbahis19.com/en/"+(matchlink.get("href"))) return urls class WebPage(QtWebEngineWidgets.QWebEnginePage): def __init__(self): super(WebPage, self).__init__() self.loadFinished.connect(self.handleLoadFinished) def start(self, urls): self._urls = iter(urls) self.fetchNext() def fetchNext(self): try: url = next(self._urls) except StopIteration: return False else: self.load(QtCore.QUrl(url)) return True def processCurrentPage(self, html): scrape_page(self.url().toString(), html) if not self.fetchNext(): process_records() def handleLoadFinished(self): self.toHtml(self.processCurrentPage) app = QtWidgets.QApplication(sys.argv) webpage = WebPage() run() app.exec_() 服务注入您的服务,然后使用它。它将为您触发摘要:

$timeout