AngularJs对ng消息的自定义替换

我在Angular 1.2.28中创建了zz消息指令，作为在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 pattern将被添加到输入字段。

请解决此问题。