例如，我的格式为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工具提示编写此类validation-tooltip指令？
或者您可以建议另一种方法来维护验证错误消息吗？
答案 0 :(得分：37)
validationTooltip是主要指令。它有以下责任：
- 通过其转换内容定义工具提示模板
- 跟踪验证表达式，以便可以使用每个摘要周期对它们进行评估。
- 公开控制器API以允许valiationMessage指令自行注册
- 在指令上提供'target'属性，以指定徽章（和相关工具提示）将绑定到哪个表单字段
附加说明
工具提示模板使用link函数中的transclusion函数将模板绑定到指令的作用域。模板可以绑定到的范围内有两个属性：
- $ form ：绑定到父作用域中定义的表单模型。即$ scope.myForm
- $ field ：绑定到父作用域中的form.name模型。即$ scope.myForm.myInput
这允许模板绑定到验证属性，例如$ valid，$ invalid，$ pristine，$ dirty和$ error，而不直接引用表单名称或输入字段的名称。例如，以下所有表达式都是有效的绑定表达式：
$ form properties：
$ field properties：
指令实施
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
});
});
});
}
}
});
validationMessage指令跟踪要在工具提示中显示的验证消息。它使用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 );
}
}
});
- 添加名称属性
的表单- 添加一个或多个表单字段 - 每个字段都带有name属性和ng-model指令。
- 声明
<validation-tooltip>元素，其中target属性引用其中一个表单字段的名称。- 将
validation-message指令应用于带有可选ng-if绑定表达式的每条消息。
<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>
答案 1 :(得分：9)
@pixelbits答案很棒。我改用了这个：
<div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$invalid }">
<label for="name" class="col-sm-4 control-label">What's your name?</label>
<div class="col-sm-6">
<input class="form-control has-feedback" id="name" name="name"
required
ng-minlength="4"
ng-model="formData.name"
tooltip="{{form.name.$valid ? '' : 'How clients see your name. Min 4 chars.'}}" tooltip-trigger="focus"
tooltip-placement="below">
<span class="glyphicon glyphicon-ok-sign text-success form-control-feedback" aria-hidden="true"
ng-show="form.name.$valid"></span>
</div>
</div>
该技术是ui-bootstrap的工具提示，并将工具提示文本设置为＆＃39;＆＃39;有效时。
答案 2 :(得分：2)
来自@pixelbits的精彩回答。我使用了他的指令并略微修改它们以允许工具提示显示在一些用户请求的实际输入上。
angular.module('app')
.directive('validationTooltip', ['$timeout', function ($timeout) {
function toggleTooltip(scope) {
if (!scope.tooltipInstance) {
return;
}
$timeout(function() {
if (scope.errorCount > 0 && (scope.showWhen == undefined || scope.showWhen())) {
scope.tooltipInstance.enable();
scope.tooltipInstance.show();
} else {
scope.tooltipInstance.disable();
scope.tooltipInstance.hide();
}
});
}
return {
restrict: 'E',
transclude: true,
require: '^form',
scope: {
showWhen: '&',
placement: '@',
},
template: '<div></div>',
controller: ['$scope', 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;
toggleTooltip($scope);
});
}],
link: function (scope, element, attr, formController, transcludeFn) {
scope.$form = formController;
transcludeFn(scope, function (clone) {
var tooltip = angular.element('<div class="validationMessageTemplate" style="display: none;"/>');
tooltip.append(clone);
element.append(tooltip);
$timeout(function () {
scope.$field = formController[attr.target];
var targetElm = $('[name=' + attr.target + ']');
targetElm.tooltip({
placement: scope.placement != null ? scope.placement : 'bottom',
html: true,
title: clone,
});
scope.tooltipInstance = targetElm.data('bs.tooltip');
toggleTooltip(scope);
if (scope.showWhen) {
scope.$watch(scope.showWhen, function () {
toggleTooltip(scope);
});
}
});
});
}
}
}]);
主要的变化是该指令使用jQuery通过name属性查找目标元素（应该是输入），并初始化该元素的工具提示而不是指令的元素。我还在范围中添加了showWhen属性，因为您可能并不总是希望输入无效时显示工具提示（请参阅下面的示例）。
validationMessage指令未更改
angular.module('app').directive('validationMessage', function () {
return {
restrict: 'A',
priority: 1000,
require: '^validationTooltip',
link: function (scope, element, attr, ctrl) {
ctrl.$addExpression(attr.ngIf || true);
}
}
});
Html中的用法也很相似，只需要添加showWhen：
<div class="form-group" ng-class="{ 'has-error' : aForm.note.$invalid && (aForm.note.$dirty) }">
<label class="col-md-3 control-label">Note</label>
<div class="col-md-15">
<textarea
name="note"
class="form-control"
data-ng-model="foo.Note"
ng-required="bar.NoteRequired"></textarea>
<validation-tooltip target="note" show-when="aForm.note.$invalid && (aForm.note.$dirty)">
<ul class="validation-list">
<li validation-message ng-if="$field.$error.required">Note required</li>
</ul>
</validation-tooltip>
</div>
</div>
答案 3 :(得分：1)
您实际上只需使用tooltip-enable属性：
<div class="showtooltip" tooltip-placement="left" tooltip-enable="$isValid" tooltip="tooltip message"></div>
答案 4 :(得分：1)
我的目标是利用ng-messages和ui-bootstrap popover进行验证反馈。我更喜欢popover与工具提示，因为它更清楚地显示了帮助块样式。
以下是代码：
<!-- Routing Number -->
<div class="form-group-sm" ng-class="{ 'has-error' : form.routingNumber.$invalid && !form.routingNumber.$pristine }">
<label class="control-label col-sm-4" for="routing-number">Routing #</label>
<div class="col-sm-8">
<input class="form-control input-sm text-box"
id="routing-number"
name="routingNumber"
ng-model="entity.ROUTINGNUM"
popover-class="help-block"
popover-is-open="form.routingNumber.$invalid"
popover-trigger="none"
required
uib-popover-template="'routing-number-validators'"
string-to-number
type="number" />
</div>
<!-- Validators -->
<script type="text/ng-template" id="routing-number-validators">
<div ng-messages="form.routingNumber.$error">
<div ng-messages-include="/app/modules/_core/views/validationMessages.html"></div>
</div>
</script>
</div>
这是validationMessages.html
<span ng-message="required">Required</span>
<span ng-message="max">Too high</span>
<span ng-message="min">Too low</span>
<span ng-message="minlength">Too short</span>
<span ng-message="maxlength">Too long</span>
<span ng-message="email">Invalid email</span>
注意：我必须升级到jQuery 2.1.4才能使uib-popover-template指令起作用。
依赖关系：