角+ 2.3自举 - 动态提示 [英] Angular + Bootstrap 2.3 - Dynamic tooltip

问题描述

我想实现在角+ 2.3自举应用基于动态提示显示。由于系统的限制聪明，我不能用角UI。

I am trying to implement dynamic tooltip display in an Angular + Bootstrap 2.3 based application. Due to system wise limitation, I can't use Angular-UI.

要求是显示根据错误情况自定义工具提示。
例如，显示无效数据提示，如果数据不符合预期的模式。但是，如果输入的数据是正确的，它应该显示的默认提示。
同样基于其他错误情况，如超过最大长度等，具体的错误信息将被显示出来。

The requirement is to display custom tooltips depending upon the error condition. For instance, display "Invalid data" as tooltip if the data does not match the expected pattern. But if the entered data is correct, it should display default tooltip. Similarly based on other error scenarios such as exceeding maximum length etc, specific error messages are to be displayed.

我曾尝试通过听错误由角加入元素类的指令来实现这些。下面是code：

I have tried to implement these in a directive by listening to error classes added to the element by Angular. Below is the code:

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

我想知道，如果这是正确的方式或者是还有什么更好的选择。

I would like to know if this is the right way or is there any better alternative.

推荐答案

我相信这个解决方法会为你工作：
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=$p$pview

I believe this solution may work for you: http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

这是从我的回答类似的工具提示相关的问题：
<一href=\"https://stackoverflow.com/questions/24414473/angular-ui-tooltip-overflowing-screen/29450986#29450986\">Angular UI工具提示四溢屏幕

This was from my answer to a similar tooltip related question: Angular UI Tooltip overflowing screen

请注意，我们必须扩展上述溶液中，如在这种情况下，工具提示必须是动态的。在这里我们可以使用双大括号：

Note that we must extend the above solution, as in this situation the tooltip must be dynamic. We can use the double-curly brackets here:

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

在角code，我们会做这样的事：

In the angular code, we would do something like this:

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

这篇关于角+ 2.3自举 - 动态提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！