Действия $modal.open() в результате не обновляются в директиве проверки формы

У меня есть угловая директива под названием "show-errors", которую я использую для проверки формы. Это применит класс css "has-error" к содержащемуся div, когда проверка завершится неудачно. Это прекрасно работает в большинстве случаев, например, когда пользователь покидает поле ввода (размытие) или когда пользователь нажимает кнопку продолжения (это многошаговая форма). Я запускаю проверку для всех элементов формы при продолжении, передавая сообщение "show-errors-check-validity".

$rootScope.$broadcast('show-errors-check-validity');

Вот директива:

angular
    .module('eStoreApp')
    .directive('showErrors', showErrors);

function showErrors($log, $rootScope, $timeout) {
    return {
        restrict: 'A',
        require: '^form',
        link: function(scope, el, attrs, formCtrl) {
            var domElement = el[0].querySelector("[name]");
            var angularElement = angular.element(domElement);
            var textBoxName = angularElement.attr('name');
            var d = new Date();
            var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

            angularElement.bind('blur', function () {
                $log.debug(time + ': BLUR: Input validation: ' + textBoxName + '.  Valid = ' + !formCtrl[textBoxName].$invalid);
                el.toggleClass('has-error', formCtrl[textBoxName].$invalid);
            });

            scope.$on('show-errors-check-validity', function() {
                $log.debug(time + ': SHOW-ERRORS: Input validation: ' + textBoxName + '.  Valid = ' + !formCtrl[textBoxName].$invalid);
                el.toggleClass('has-error', formCtrl[textBoxName].$invalid);
            });
        }
    };
}

Вот как это используется в HTML:

<div class="form-group row" show-errors>
    <label class="col-sm-2 control-label">Zip Code</label>
    <div class="col-sm-10">
        <input type="text" name="zip" class="form-control" required ng-model="vm.checkoutData.data.shipping.zip">
        <p class="help-block" ng-if="shippingInformationForm.zip.$error.required">Zip Code is required.</p> 
    </div>
</div>

Это все работает фантастически, пока я не попытаюсь вызвать проверку с возвращением обещания, в частности, $modal.open(). Пользователь может открыть модальный режим, который позволяет ему выбрать ранее сохраненный адрес, который заполняется в форме. Когда они это сделают, я хочу, чтобы проверка запускалась. Я снова использую сообщение "show-errors-check-validity". Это относится к функции в директиве, но значения angularjs из $error еще не обновлены. Если я вызываю $rootScope.$ Digest(), я получаю сообщение об ошибке, что дайджест выполняется. Как заставить директиву сработать ПОСЛЕ того, как angularjs $scope.shippingAddressForm.zip.$ Invalid был обновлен?

Функция selectAddress() ниже находится в контроллере раздела, который содержит shippingAddressForm и все элементы формы с директивой show-errors.

function selectAddress() {
    var modalInstance = $modal.open({
        templateUrl: 'Scripts/Checkout/AddressSelector/addressSelector.html',
        controller: 'addressSelectorController',
        controllerAs: 'vm',
        size: 'sm',
        resolve: {
            addresses: function() {
                return shippingAddressService.getAll();
            }
        }
    });

    modalInstance.result.then(function (selectedAddress) {
        vm.checkoutData.data.shipping = selectedAddress;
        if (selectedAddress.id) {
           $scope.$emit('show-errors-check-validity');
        }
    }, function() {
        $log.info('Modal dismissed.');
    });
}

0 ответов

Другие вопросы по тегам