Angular JS 复写 html5 required

JavaScript代码

mod.directive('required', ['$translate', function ($translate) {
        return function(scope, elm, attr) {
            var raw = elm[0];
            elm.bind('invalid', function(e) {
                $translate('COM_REQUIRED').then(function(message){
                    var $target = $(e.target);
                    if($target.hasClass("focus")){
                        return false;
                    }
                    $target.addClass('focus');
                    $target.after('<p class="invalid-msg"><i class="glyphicon glyphicon-warning-sign"></i>' + message + '</p>');
                });
                return false;
            });

            elm.bind('focus', function(e) {
                var $target = $(e.target);
                $target.removeClass('focus');
                $target.next('.invalid-msg').remove();
            });
        };
    }]);

Css代码

.invalid-msg {
    position: absolute;
    left: 40%;
    margin-top: 5px;
    border: 1px solid #ccc;
    padding: .2em 1em;
    z-index: 2;
    background-color: #fff;
    color: #FF4136;
    box-shadow: 1px 1px 3px #ccc;
}

.invalid-msg i {
    margin-right: 5px;
}

.invalid-msg:before {
    content: "";
    position: absolute;
    display: block;
    top: -10px;
    left: 20px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #ccc;
}

.invalid-msg:after {
    content: "";
    position: absolute;
    display: block;
    top: -8px;
    left: 21px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #fff;
}