角+ 2.3自举 - 动态提示(Angular + Bootstrap 2.3 - Dynamic

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

要求是显示取决于错误情况的定制工具提示。例如，显示“无效数据”作为工具提示，如果数据不匹配预期模式。但是，如果输入的数据是正确的，它应该显示默认的提示。类似地基于其他错误场景如超过最大长度等，具体的错误消息被显示。

我试图通过听错误的角度加入元素类的指令来实现这些。下面是代码：

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

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

我相信这个解决方案可以为你工作： http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

这是从我的回答类似的提示相关的问题：角UI工具提示屏幕四溢

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

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