Question

我正在尝试在基于Angular + Bootstrap 2.3的应用程序中实现动态工具提示显示。由于系统明智的限制，我不能使用Angular-UI。

要求是根据错误情况显示自定义工具提示。例如，显示＆＃34;无效数据＆＃34;如果数据与预期模式不匹配，则为工具提示。但如果输入的数据正确，则应显示默认工具提示。同样地，基于其他错误情况，例如超过最大长度等，将显示特定的错误消息。

我试图通过监听Angular添加到元素的错误类来在指令中实现这些。以下是代码：

TestApp.directive('dynamicTooltip', function() {

        var link = function (scope, element, attrs) {

            // Set dt-original-title attribute value to HTML Title attribute value
            if (angular.isDefined(attrs.title)){
                element.attr('dt-original-title', attrs.title); 
            }

            // Override dt-original-title attribute value to dt-title attribute value (if set)
            if (angular.isDefined(attrs.dtTitle)){
                element.attr('dt-original-title', attrs.dtTitle);   
            }  

            scope.$watch(function() {
                return element.attr('class');
            }, function (newValue) {

                var classes = newValue;

                if (element.hasClass("ng-invalid-required") && angular.isDefined(attrs.dtRequired)) {
                    $(element).attr('title', attrs.dtRequired);
                } else if (element.hasClass("ng-invalid-minlength") && angular.isDefined(attrs.dtMinlength)) {
                    $(element).attr('title', attrs.dtMinlength);
                } else if (element.hasClass("ng-invalid-min") && angular.isDefined(attrs.dtMin)) {
                    $(element).attr('title', attrs.dtMin);
                } else if (element.hasClass("ng-invalid-maxlength") && angular.isDefined(attrs.dtMaxlength)) {
                    $(element).attr('title', attrs.dtMaxlength);
                } else if (element.hasClass("ng-invalid-max") && angular.isDefined(attrs.dtMax)) {
                    $(element).attr('title', attrs.dtMax);
                } else if (element.hasClass("ng-invalid-pattern") && angular.isDefined(attrs.dtPattern)) {
                    $(element).attr('title', attrs.dtPattern);
                } else {
                    if (angular.isDefined(element.attr("dt-original-title"))) {     //Reset to original tooltip
                        $(element).attr('title', element.attr("dt-original-title"));                            
                    } else {
                        $(element).removeAttr("title");     // Remove if title is not set.
                    }
                }
            });
        }

        return {
            restrict: 'A',
            link: link
        }
    });

HTML：

<input id="txt1" type='text' 
    title='Default textbox tooltip'         
    ng-minlength="1"
    ng-maxlength='3'
    ng-model="myText1"
    ng-pattern="/^[a-zA-Z]+$/"          
    dynamic-tooltip
    dt-title="My customized tooltip"
    dt-maxlength="Maximum length exceeded"
    dt-minlength="Minimum length required"
    dt-required="This field is required"
    dt-pattern="Invalid data"
    required />

我想知道这是正确的方法，还是有更好的选择。

Answer 1

我相信这个解决方案可能适合您： http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

这是我对类似工具提示相关问题的回答： Angular UI Tooltip overflowing screen

请注意，我们必须扩展上述解决方案，因为在这种情况下，工具提示必须是动态的。我们可以在这里使用双花括号：

<div tooltip="{{dynamicTooltip}}" placement="right">Some content</div>

在角度代码中，我们会这样做：

$scope.dynamicTooltip = "Default Message";
$scope.someFunction = function() {
   //fetch data or perform some process
   $http.get('some/url')
     .success(function (data) {
       $scope.dataProperty = data.someProperty;
       $scope.dynamicTooltip = $scope.dataProperty;
     })
     .error( fuction(data, status, headers, config) {
       $scope.dynamicTooltip = "Error Message!";  //or = status, if != undef
     });

Angular + Bootstrap 2.3 - 动态工具提示

1 个答案: