0

我有一个名为“show-errors”的角度指令，用于表单验证。这将在验证失败时将“has-error”css 类应用于包含 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.');
    });
}
4

0 回答 0