例如我有
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工具提示来编写这样的验证 – tooltip指令？
Demo Fiddle
验证工具提示指令
validationTooltip是主要的指令。它有以下职责：
- Define the tool tip template through its transcluded contents
- Keep track of validation expressions so that they can be evaluated with each digest cycle.
- Expose a controller API for allowing valiationMessage directives to register themselves
- Provide a ‘target’ attribute on the directive to specify which form field the badge (and the associated tooltip) will be bound to
补充笔记
工具提示模板使用链接功能的交叉函数将模板绑定到指令的范围。模板可以绑定到的范围内有两个属性：
- $form: Bound to the form model defined in parent scope. i.e. $scope.myForm
- $field: Bound to the form.name model in parent scope. i.e. $scope.myForm.myInput
这允许模板绑定到验证属性，例如$ valid，$ invalid，$ pristine，$ dirty和$ error，而不直接引用表单名称或输入字段的名称。例如，所有以下表达式都是有效的绑定表达式：
$表单属性：
>`$ form。$ valid`
>`$ form。$ invalid`
>`$ form。$ dirty`
>`$ form。$ pristine`
>`$ form。$ error.required`等…
$字段属性：
>`$ field。$ valid`
>`$ field。$ invalid`
>`$ field。$ dirty`
>`$ field。$ pristine`
>`$ field。$ error.required`等…
指令执行
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',ctrl) {
ctrl.$addExpression(attr.ngIf || true );
}
}
});
HTML中的用法
- Add a form with a name attribute
- Add one or more form fields – each with a name attribute and an ng-model directive.
- Declare a
<validation-tooltip>element with atargetattribute referring to the name of one of the form fields.- Apply the
validation-messagedirective to each message with an optionalng-ifbinding expression.
<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>
