javascript - 从服务器端获取所有数据后计算数据并渲染它们； $(window).load() 没有运气

Question

我有一个<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 Controller 之外定义，所以我尝试了:

• 定义$(window).load(function(){});从 Angular Controller 中，像这样:

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

• 在 Angular Controller 中定义以下函数:

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


• 也在 Augular Controller 中定义以下函数:

  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);
                }
        }
    }
}

Answer 1

您只需调用 Controller 主体中的函数即可确保在创建 Controller 时执行该函数:

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

    $scope.actualizarDias();
}

尽管就目前情况而言，这可能仍然会失败，因为您的 Controller 中有很多特定于 View 的代码，这是一个非常糟糕的主意。您应该考虑更改代码的结构，以便将表中的数据加载到 Controller 中并绑定(bind)到该 Controller ，而不是让 Controller 迭代表。