Question

我有一个名为“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>

这一切都很棒，直到我尝试使用promise返回触发验证，特别是$ 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.');
    });
}

结果中的$ modal.open（）操作未在表单验证指令中更新

0 个答案: