计算数据并在从服务器端获取所有数据后呈现它们;$(window).load() 没有运气

Calculating data and render them after fetching all data from server side; $(window).load() no luck

本文关键字:数据 运气 load window 服务器端 获取 计算      更新时间:2023-09-26

我有一个<s:iterator>从服务器端获取所有数据并将它们显示在页面中:

<s:iterator id="lstActividades" value="impDesLst">
    <tr>
        <td><input ng-change="actualizarDias();" type="text" class="form-control" name="produccionForm.minutosL<s:property value="%{actividad.idActividad}" />" id="produccionForm.minutosL<s:property value="%{actividad.idActividad}" />" ng_model="minutosL<s:property value="%{actividad.idActividad}" />" ng-init="minutosL<s:property value="%{actividad.idActividad}" />='<s:property value="%{producciones[0].minutos}" />'" /></td>

请注意,它有ng-change=actualizarDias()计算一行中的所有数据并呈现结果。当数字发生变化时,它工作得很好。

但是,我想在第一次加载页面时获得结果。现在结果字段为空,但是如果我们按 F5 或更改一个数字,所有结果都会正确显示。

如我所见,如果我想使用 jQuery 函数,它们必须从 Angular 控制器中定义出来,所以我尝试了:

  • 定义 Angular 控制器之外的$(window).load(function(){});,如下所示:

    $(window).load(function(){ angular.element(document).scope().actualizarDias(); });

  • 在 Angular 控制器中定义以下函数:

    $scope.$on('$viewContentLoaded', function ($evt) { $scope.actualizarDias(); });//not working

  • 在 Augular 控制器中也定义以下函数:

    setTimeout(function(){ $scope.$apply(function() { $(window).load(function(){ $scope.actualizarDias(); }); }); });//not working

无济于事。

我的脚本位于具有以下结构的独立jsp文件中:

<%
    response.setHeader("Cache-Control","no-cache"); 
    response.setHeader("Pragma","no-cache"); 
    response.setDateHeader ("Expires", -1); 
%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
angular.module('myApp').controller('myCtrl', function($scope, $modal, $window, $http, ProccessFormService) {
    $scope.function1 = function() {...};
    $scope.function2 = function() {....};
    $scope.actualizarDias() = function() {...};
}

现在,当我第一次进入页面时,如何加载我的结果?

我的计算函数是:

$scope.actualizarDias = function(){
    tabla = document.getElementById('tablaProducciones').children[1];
    $scope.impL="";
    $scope.minutosTotalesL="";
    $scope.minutosTotalesLFormat="";
    for (var i=1; i<tabla.children.length*2; i++){
        if (i%2!=0) {
            var inputL = tabla.childNodes[i].cells[2].children[0].value;
            var inputAct = tabla.childNodes[i].cells[0].innerHTML;
            if($scope.impL=="" || $scope.impL==undefined){
                $scope.impL=inputAct + "-" + inputL;
                } else {
                $scope.impL+=";" + inputAct + "-" + inputL;
                }
            if (!isNaN(inputL) && inputL>0){
                if ($scope.minutosTotalesL=='' || $scope.minutosTotalesL==undefined){
                    $scope.minutosTotalesL=inputL;
                } else {
                    $scope.minutosTotalesL=parseInt($scope.minutosTotalesL) + parseInt(inputL);
                    }
                $scope.minutosTotalesLFormat = $scope.minutosAHoras($scope.minutosTotalesL);
                }
        }
    }
}

您只需在控制器的主体中调用该函数,以确保在创建控制器时执行该函数:

function MyController() {
    $scope.actualizarDias = function(){
        ...
    }
    $scope.actualizarDias();
}

尽管就目前而言,这可能仍然会失败,因为您的控制器中有很多特定于视图的代码,这是一个非常糟糕的主意。 您应该考虑更改代码的结构,以便将表中的数据加载到控制器并绑定到控制器,而不是让控制器遍历表。