Доступ к обновленному DOM из контроллера после проверки формы AngularJS - PullRequest
Новая
       9

Доступ к обновленному DOM из контроллера после проверки формы AngularJS

0 голосов
/ 21 сентября 2018

Таким образом, в настоящее время у меня есть форма, которая при нажатии проходит проверку формы 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 после проверки формы.Я прочитал почти каждый вопрос, связанный с ним, и не могу найти ответ.Я попытался передать форму и получить доступ к форме. $ Valid.Я пробовал $ timeout, который работает на 100 мс, а не на 0. Я не хочу использовать тайм-аут, так как на 0 мс он не работает, это не будет правильным решением.

Если кто-то может объяснить мне в терминах иерархии, как все в моей ситуации запускается от нажатия кнопки «Отправить» до доступа к любой части DOM в контроллере, что было бы здорово, спасибо!

РЕДАКТИРОВАТЬ : поэтому после небольшого прочтения выглядит, как document.querySelector() возвращает static nodeList и не является живым представлением DOM.Продолжаем расследование.

EDIT2 : Я только что прочитал это когда-то-нод-лист-живой-и-когда-он-статический и попробовалdocument.getElementsByClassName('failed');, который все еще возвращал то же самое поведение - пустой список при первом щелчке и правильный список во второй раз, что наводит меня на мысль, что это не проблема того, является ли он статическим / активным, но более того, возможно, моя функция срабатывает не на той частижизненного цикла.Позже я приведу метод клонирования по ссылке.

EDIT3 : На самом деле мое предыдущее предположение кажется верным, поскольку оно не имеет отношения к тому, является ли он статическим / живым списком (HTML-коллекцииlive) - метод клонирования был бесполезен, так как я добавлял класс и распечатывал элемент в том же файле JS (не из cshtml), поэтому он не был тем же, что и элемент, изменяемый из проверки angularJS.HTML Collection (live) и NodeList (not-live) возвращали один и тот же элемент при добавлении класса через JS.

EDIT4 : Кроме того, я отслеживал элемент с помощью console.log () и обнаружил, что, хотя он был пустым, в нем все еще были элементы, но это было потому, чтоУ меня была живая ссылка на объект, и он был оценен после раскрытия, а не когда я его регистрировал.

...