Javascript AngularJs用于ng消息的自定义替换

我已经在Angular 1.2.28中创建了zz messages指令，作为在ie8中工作的ng消息的替代

(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模式。当该字段被清除时，ng invalid maxlength和zz invalid模式被添加到输入字段中

---

请解决这个问题。

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

您能提供plunker/fiddle吗？这是指向plunkr的链接