演示小提琴

验证工具提示指令

validateTooltip是主要指令。它具有以下职责：

1. 通过其包含的内容定义工具提示模板
2. 跟踪验证表达式，以便可以在每个摘要循环中对其进行评估。
3. 公开用于允许valiationMessage指令自行注册的控制器API
4. 在指令上提供“目标”属性，以指定徽章（和相关的工具提示）将绑定到的表单字段
   

补充笔记

工具提示模板使用链接函数中的包含函数将模板绑定到指令的作用域。模板可以绑定到范围内的两个属性：

1. $ form ：绑定到父范围中定义的表单模型。即$ scope.myForm
2. $ field ：绑定到父作用域中的form.name模型。即$ scope.myForm.myInput
   

这允许模板绑定到验证属性，例如$ valid，$ invalid，$ pristine，$ dirty和$
error，而无需直接引用表单名称或输入字段的名称。例如，以下所有表达式都是有效的绑定表达式：

$ form属性：

• $ form。$ valid
• $ form。$ invalid
• $ form。$ dirty`
• $ form。$ pristine`
• $ form。$ error.required等…

$ field属性：

• $ 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
                    });

                });
            });
        }
    }
});

验证消息指令

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中的用法

1. 添加具有名称属性的表单
2. 添加一个或多个表单域-每个表单域都有一个name属性和一个ng-model指令。
3. 声明<validation-tooltip>具有target属性的元素，该属性引用表单字段之一的名称。
4. 使用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>