Angularjs 角度+引导2.3-动态工具提示

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

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

我已经尝试在一个指令中通过监听由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:

---

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

我相信这个解决方案可能适合您：

这是我对类似工具提示相关问题的回答：

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

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

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