Question

我在Angular 1.2.28中创建了zz-messages指令，作为在ie8中工作的ng-messages的替代。

(function () {
    'use strict';

    angular
        .module('app.widgets')
        .directive('zzMessages', errorContainer);


    function errorContainer() {
        // Usage:
        //     <div zz-messages="field.$error">
        //          <span zz-message="required">This field is required</span>
        //     </div>
        //     Replacement for zz-message angular library to show single error on screen at a time and hide others

        return {
            link: function ($scope, element, attrs) {
                var messageElements = element[0].querySelectorAll('[zz-message]');

                angular.forEach(messageElements, function (message) {
                    message.style.display = 'none';
                });

                $scope.$watchCollection(attrs.zzMessages, function (messages) {
                    var existingMessageOnView = false;
                    angular.forEach(messageElements, function (message) {
                        var zzMessage = angular.element(message).attr('zz-message');
                        if (!existingMessageOnView && messages[zzMessage] === true) {
                            message.style.display = 'block';
                            $(message).addClass('error-message');
                            existingMessageOnView = true;
                        } else {
                            message.style.display = 'none';
                        }
                    });
                });
            }
        }
    }

 }());

除特殊情况外，它始终可以正常工作。

<div zz-forminput>
<label for="headquarter" class="col-md-4">Family Headquarter</label>
<div class="col-md-8">
    <input type="text" name="headquarter" id="headquarter" placeholder="K" data-ng-model="vm.userDetails.familyHQ" data-ng-maxlength="100" ng-pattern="/^[a-zA-Z0-9 ]+$/" maxlength="101">
    <div zz-messages="vm.basicDetailsForm.headquarter.$error" data-ng-if="vm.basicDetailsForm.headquarter.$dirty">
        <span zz-message="pattern">Family Headquarter can only contain alpha numeric characters</span>
        <span zz-message="maxlength">Family Headquarter cannot exceed 100 characters</span>
    </div>
</div>

我的输入字段不是必需的，但它有一个ng-maxlength =“100”和ng-pattern。清除该字段时，将ng-invalid-maxlength和zz-invalid-pattern添加到输入字段。

请解决此问题。

Answer 1

它解决了。问题出在我制作的自定义zzMinAlphaCharacters验证器中。感谢您的支持：）

AngularJs定义替换ng-messages

1 个答案: