例如,我的形式是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工具提示编写此类validate-tooltip指令?

或者,您是否可以建议另一种方法来维护验证错误消息?

最佳答案

Demo Fiddle

验证工具提示指令

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



附加说明

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



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

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


    <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>
    

    关于angularjs - 如何使用AngularJS UI Bootstrap工具提示显示表单输入错误?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24726105/

    10-12 12:38
    查看更多