Действия $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.');
});
}