验证工具提示指令

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>