Angular + Bootstrap 2.3 - Dynamic tooltip

问题

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.

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.

回答1:

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

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>

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

来源：https://stackoverflow.com/questions/23634519/angular-bootstrap-2-3-dynamic-tooltip