app.factory('uiTipsFactory', function () { return { filterClass: function (ele, invalid) { if (invalid) { //如果验证不通过 ele.removeClass('ng-valid').removeClass('ng-pristine').addClass('ng-invalid').addClass('ng-dirty'); } else { ele.removeClass('ng-invalid').addClass('ng-valid'); } }, on: function (ele, msg) { var lastTip = ele.data('last-tip'); if (lastTip && lastTip === msg) { return; } ele.data('last-tip', msg); this.filterClass(ele, true); var offset = ele.offset(); if (!offset.top && !offset.left && ele.is('hidden')) { offset = ele.show().offset(); } var id = ele.attr('ui-valid-id'); if (!id) { id = Math.guid(); ele.attr('ui-valid-id', id); } if (id.contains('.')) { id = id.replace(/\./g, '_'); } var top = offset.top, left = offset.left; var getTips = function () { var _tip = $('#vtip_' + id); if (_tip.length) { _tip.html(msg).css({ 'display': 'none', 'top': top + 'px', 'left': left + ele.width() + 10 + 'px' }); } else { var html = '<div>' + '<div>' + msg + '</div>'; $(html).css({ 'display': 'none', 'position': 'absolute', 'top': top + 'px', 'left': left + ele.width() + 10 + 'px' }).appendTo($('body')); } }; var bindTipsShow = function () { getTips(); ele.unbind('mouseenter mouseleave').bind('mouseenter', function () { var _tip = $('#vtip_' + id); if (_tip.is(':hidden')) { _tip.show(); } }).bind('mouseleave', function () { $('#vtip_' + id).hide(); }); }; bindTipsShow(); }, off: function (ele) { ele.data('last-tip', ''); this.filterClass(ele); var id = ele.attr('ui-valid-id'); if (!id) { return; } if (id.contains('.')) { id = id.replace(/\./g, '_'); } $('#vtip_' + id).remove(); ele.unbind('mouseenter mouseleave'); } } });
1、验证不通过，增加背景色，元素css处理如下
ele.removeClass('ng-valid').removeClass('ng-pristine').addClass('ng-invalid').addClass('ng-dirty');
验证通过，CSS处理如下
ele.removeClass('ng-invalid').addClass('ng-valid');
2、背景提示语，则是在body上增加一个div层。
(6)其他相关代码