在AngularJS验证中,我想用ui-bootstrap工具提示显示错误消息

时间:2018-03-05 09:22:32

标签: javascript angularjs angularjs-directive angular-ui-bootstrap

环境

  • AnuglarJS 1.6x
  • UI-bootstrap2.5

我想用AngularJS验证工具提示时显示错误消息。 我指的是由以下jQuery和bootstrap.js创建的指令,参考它, 如何使用ui-bootstrap实现它?

参考样本

我尝试在Query中设置工具提示的地方添加ui-tooltip的属性,但它不起作用。

<script>
  var app = angular.module("app", ['ui.bootstrap']);
app.controller('Ctrl', function ($scope) {});
app.directive('validationMessage', function () {
    return {
        restrict: 'A',
        priority: 1000,
        require: '^validationTooltip',
        link: function (scope, element, attr, ctrl) {
            ctrl.$addExpression(attr.ngIf || true);
        }
    }
});
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[0].firstChild;
                var tooltip = angular.element('<div class="validationMessageTemplate tooltip-danger" />');
                tooltip.append(clone);
                element.append(tooltip);
                $timeout(function () {


                    scope.$field = formController[attr.target];
                    badge.attr( 'uib-tooltip', "test")

                });
            });
        }

    }
});

0 个答案:

没有答案
相关问题