Question

我有一个Web应用程序，可以轮询服务器以获取数据更新（基于服务器上正在运行的测试队列）。如果测试失败，我有一个包含日志的引导方式。当应用程序从服务器收到更新时，所有打开的模式都将关闭，但页面上会保留模式屏幕，以防止交互。

我已尝试在打开模式时暂停更新，而在关闭模式时恢复更新，但这似乎并未解决问题。我还尝试过将日志的模式移动到DOM的正下方。似乎数据更改导致页面重新绘制了控制器内部的所有内容。

摘自index.html

<div class="row" ng-controller="testStatusController as testStatus">
    Header Row (static html)
                <div class="row test-table-data {{script.colorClass}}" ng-repeat="script in testStatus.scripts">
                    <div class="col-md-2">
                        <p class="align-middle"><span class="d-inline d-md-none">Name: </span><span>{{script.tcName}}</span></p>
                    </div>
                    <div class="col-md-6 align-middle">
                        <p><span class="d-inline d-md-none">Description: </span>{{script.description}}</p>
                    </div>
                    <div class="col col-md-2 align-middle">
                        <p><span class="d-inline d-md-none">Run Status: </span>{{script.status}}</p>
                    </div>
                    <div class="col col-md-2">
                        <p>
                            <span class="icon text-align-middle dripicons-wrong text-danger big" ng-if="!script.pass && script.status=='Complete'" data-toggle="modal" data-target=".{{script.tcName.slice(0,-4)}}"></span>
                            <span class="d-inline icon dripicons-checkmark text-success big" ng-if="script.pass"></span>
                            <span class="spinner-border text-primary" ng-if="script.status=='Running'"></span>
                            <span class="d-inline icon dripicons-clock text-primary big" ng-if="script.status=='Not Run'"></span>
                        </p>
                    </div>
                    <div class="modal fade {{script.tcName.slice(0,-4)}} log" ng-if="!script.pass && script.status == 'Complete'">
                        <div class="modal-dialog modal-lg" ng-focus="testStatus.pauseUpdates(true)" ng-blur="testStatus.pauseUpdates(false)">
                            <div class="modal-content log-modal">
                                <div class="modal-header">
                                    <div class="modal-title text-monospace">
                                        <h4>{{script.tcName}}</h4>
                                        <h6>{{script.description}}</h6>
                                    </div>
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <p class="text-monospace"><span ng-repeat="log in testStatus.getLog(script.tcName).lines track by $index">{{log.line}}<br /></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row test-table-foot">
                    <div class="col-md-3">
                        <p>Passed: <span>{{testStatus.passed()}}</span></p>
                   </div>
                    <div class="col-md-3">
                        <p>Failed: <span>{{testStatus.failed()}}</span></p>
                    </div>
                    <div class="col-md-3">
                        <p>Remaining: <span>{{testStatus.remaining()}}</span></p>
                    </div>
                    <div class="col-md-3">
                        <p>Total: <span>{{testStatus.total()}}</span></p>
                    </div>
                </div>
             </div>
        </div>

更新函数（在main.js中每5秒调用一次）注释指示删除了哪些代码以使内容简短。

testList.updateResults = function () { 
            if (testList.running) {
                $http({url:theUrl + "?cmd=json&testRun=default", 
                        method: "GET"
                    }).then(function(response){
                        var strRes = response.data.result;
                        var tmp = angular.fromJson(strRes);
                        // update trName if bound input not focused
                        testList.scripts = tmp.tc;
                        testList.running = false;
                        angular.forEach(tmp.tc, function(script, index){
                            if(script.status != "Complete") {
                                testList.running = true;
                                script.colorClass = "text-primary";
                            }
                            else {
                                if(script.pass) {
                                    script.colorClass = "text-success";
                                }
                                else {
                                    script.colorClass = "text-danger";
                                    if(!(script.tcName.slice(0, -4) in testList.logs)) {
                                        testList.getLog(script.tcName);
                                    }
                                }
                            }
                        });
                        // update start/stop button
                    }, function(data){
                        console.log(data);
                    });
            }
        };

如果绑定到它们的数据相同，我希望AngularJS不会更新DOM的各个部分，而是重新绘制控制器部分中的所有内容。我的下一个直觉是将日志和状态分成不同的控制器，但是我怀疑当新日志附加到日志列表中时，我也会遇到同样的问题。

AngularJS更新模型时，停止关闭模态

0 个答案: