Question

所以我当前有一个表单，当单击该表单时，它会通过AngularJS表单验证并提交表单（如果有效），否则，如果无效，则滚动到无效的第一个表单字段。

我将显示表单和js，尽管它们是剥离的版本，所以我需要更多有关生命周期的知识。语法可能不是100％正确的，所以不必太担心，因为滚动在某些条件下有效（如下所述）

form.cshtml

<form name="form" data-form-test>
<div class="form-field 
     data-ng-class="{'failed': !form.name.$valid && form.name.$touched}">
     <input type="text"
            name="name"
            id="name" />
</div>
<input type="submit"
       data-ng-click="form.$valid ? submit() : scrollError()" />
</form>

form.js

'use strict';

angular
    .module('Directives')
    .directive('formTest', function () {
        function formsController($scope, $element) {

            $scope.scrollError = function () {
                var error = document.querySelector('.failed');

                error.scrollIntoView();
            };
        }

        return {
            scope: true,
            restrict: 'A',
            controller: formsController,
            controllerAs: 'fc',
            bindToController: true,
        };
    });

因此，当我单击“提交”时，error为空，但是第二次单击“提交”则是按预期方式进行。我假设是因为它验证并更新了DOM以添加error类，但是控制器仍然可以访问“旧” DOM（没有error类）。

我不确定生命周期的工作方式或在表单验证后如何访问更新的DOM。我已经阅读了几乎所有与之相关的问题，找不到答案。我尝试过传递表单并访问form。$ valid。我试过了$ timeout，它可以在100ms而不是0处工作。我不想使用超时，因为在0ms时它不起作用，这似乎不是正确的解决方法。

如果有人可以从层次结构上向我解释一下，从单击提交到访问控制器中DOM的任何部分，如何解雇我这种情况的一切都很好，谢谢！

编辑：因此，在多一点阅读之后，它看起来像document.querySelector()返回了 static 节点列表，并且不是DOM的实时表示形式。仍在进一步调查中。

EDIT2 ：我刚刚阅读了这个when-is-nodelist-live-and-when-is-it-static并尝试了document.getElementsByClassName('failed');，但仍然返回了相同的行为-第一次单击时是一个空列表，第二次单击时是右列表时间使我相信这不是一个静态/实时问题，而且也许我的功能在生命周期的错误部分开火了。稍后，我将通过链接提供clone方法。

EDIT3 ：实际上，我先前的假设似乎是正确的，因为它与静态/实时列表（HTML集合是实时的）无关，因为我添加了一个类，然后将元素打印在同一JS文件中（不是从cshtml中打印），因此它与从angularJS验证中更改的元素不同。通过JS添加类时，HTML Collection（实时）和NodeList（非实时）都返回相同的元素。

EDIT4 ：最重要的是，我通过console.log（）跟踪了该元素，发现虽然它为空，但其中仍然有元素，但这是因为我有对该对象的实时引用，并且一旦展开就对其进行了评估，而不是在我登录时对其进行评估。

AngularJS表单验证后，从控制器访问更新的DOM

0 个答案: