例如,我的形式是showing form input errors。
如果有一些错误,我需要在输入标签附近显示红色徽章(带有“悬停显示错误”)。如果用户将鼠标悬停在红色徽章上,他将使用AngularJS UI Bootstrap tooltip查看错误列表。
我不想将错误列表放到tooltip-html-unsafe属性中,因为它不方便编辑和维护。
此代码更具声明性:
<validation-tooltip ng-show="appForm.number.$invalid && appForm.number.$dirty">
<ul>
<li ng-show="appForm.number.$error.required">this field is required</li>
<li ng-show="appForm.number.$error.number">should be number</li>
<li ng-show="appForm.number.$error.min">minimum - 5</li>
<li ng-show="appForm.number.$error.max">miximum - 20</li>
</ul>
</validation-tooltip>
比这段代码:
<span tooltip-html-unsafe="{{<ul><li>This field is required;</li><li>...</li></ul>}}">hover to show errors</span>
如何使用AngularJS UI Bootstrap工具提示编写此类validate-tooltip指令?
或者,您是否可以建议另一种方法来维护验证错误消息?
最佳答案
Demo Fiddle
验证工具提示指令
validateTooltip是主要指令。它具有以下职责:
附加说明
工具提示模板使用链接函数中的包含函数将模板绑定(bind)到指令的作用域。模板可以绑定(bind)到范围内的两个属性:
这允许模板绑定(bind)到验证属性,例如$ valid,$ invalid,$ pristine,$ dirty和$ error,而无需直接引用表单名称或输入字段的名称。例如,以下所有表达式都是有效的绑定(bind)表达式:
$ form属性:
$ field属性:
指令实现
app.directive('validationTooltip', function ($timeout) {
return {
restrict: 'E',
transclude: true,
require: '^form',
scope: {},
template: '<span class="label label-danger span1" ng-show="errorCount > 0">hover to show err</span>',
controller: function ($scope) {
var expressions = [];
$scope.errorCount = 0;
this.$addExpression = function (expr) {
expressions.push(expr);
}
$scope.$watch(function () {
var count = 0;
angular.forEach(expressions, function (expr) {
if ($scope.$eval(expr)) {
++count;
}
});
return count;
}, function (newVal) {
$scope.errorCount = newVal;
});
},
link: function (scope, element, attr, formController, transcludeFn) {
scope.$form = formController;
transcludeFn(scope, function (clone) {
var badge = element.find('.label');
var tooltip = angular.element('<div class="validationMessageTemplate tooltip-danger" />');
tooltip.append(clone);
element.append(tooltip);
$timeout(function () {
scope.$field = formController[attr.target];
badge.tooltip({
placement: 'right',
html: true,
title: clone
});
});
});
}
}
});
验证消息指令
validateMessage指令跟踪要在工具提示中显示的验证消息。它使用
ng-if
定义要评估的表达式。如果在元素上未找到ng-if
,则表达式仅求值为true(始终显示)。app.directive('validationMessage', function () {
return {
restrict: 'A',
priority: 1000,
require: '^validationTooltip',
link: function (scope, element, attr, ctrl) {
ctrl.$addExpression(attr.ngIf || true );
}
}
});
在HTML中的用法
<div ng-class="{'form-group': true, 'has-error':form.number.$invalid}">
<div class="row">
<div class="col-md-4">
<label for="number">Number</label>
<validation-tooltip target="number">
<ul class="list-unstyled">
<li validation-message ng-if="$field.$error.required">this field is required </li>
<li validation-message ng-if="$field.$error.number">should be number</li>
<li validation-message ng-if="$field.$error.min">minimum - 5</li>
<li validation-message ng-if="$field.$error.max">miximum - 20</li>
</ul>
</validation-tooltip>
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="number" min="5" max="20" ng-model="number" name="number" class="form-control" required />
</div>
</div>
</div>
关于angularjs - 如何使用AngularJS UI Bootstrap工具提示显示表单输入错误?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24726105/