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;
}