如何使用AngularJS UI Bootstrap工具提示显示表单输入错误？

验证工具提示指令

validationTooltip是主要的指令。它有以下职责：

1. Define the tool tip template through its transcluded contents
2. Keep track of validation expressions so that they can be evaluated with each digest cycle.
3. Expose a controller API for allowing valiationMessage directives to register themselves
4. Provide a ‘target’ attribute on the directive to specify which form field the badge (and the associated tooltip) will be bound to

补充笔记

工具提示模板使用链接功能的交叉函数将模板绑定到指令的范围。模板可以绑定到的范围内有两个属性：

1. $form: Bound to the form model defined in parent scope. i.e. $scope.myForm
2. $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中的用法

1. Add a form with a name attribute
2. Add one or more form fields – each with a name attribute and an ng-model directive.
3. Declare a <validation-tooltip> element with a target attribute referring to the name of one of the form fields.
4. Apply the validation-message directive to each message with an optional ng-if binding 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>