1

我正在使用 AngularJS 和 Twitter Bootstrap (TB)，来自 Angular 我正在使用验证工具和来自 TB 的一些好东西，比如工具提示。这是 HTML 的呈现方式：

<input 
    type="text" 
    id="company_taxId" 
    ng-model="company.taxId" 
    required="required" 
    class="input ng-scope ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid-pattern ng-invalid ng-invalid-required" 
    style="width:485px;" 
    ng-minlength="9" 
    maxlength="9" 
    ng-maxlength="9" 
    ng-pattern="/^[\d{9}$]/" 
    placeholder="Ej: 458965879" 
    tooltip="" 
    wv-def="" 
    tooltip-trigger="focus" 
    tooltip-placement="right" 
    wv-cur="" 
    wv-err="Este valor debería ser un número válido." 
    wv-req="Este campo es requerido" 
    wv-min="Este valor debería tener exactamente 9 caracteres" 
    wv-max="Este valor debería tener exactamente 9 caracteres"
>

这就是我的指令在 Angular 方面的看法：

app.directive('validated', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            element.keyup(function(){
                parent = $('.tooltip');
                target = parent.find('.tooltip-inner'); 
                if( element.hasClass('ng-invalid-required') ){
                    target.html(attrs.wvReq);
                    attrs.wvCur = attrs.wvReq;
                    parent.addClass('error');
                }
                else if( element.hasClass('ng-invalid-email') ){
                    target.html(attrs.wvEml);   
                    attrs.wvCur = attrs.wvEml;
                    parent.addClass('error');   
                }
                else if( element.hasClass('ng-invalid-minlength') ){
                    target.html(attrs.wvMin);   
                    attrs.wvCur = attrs.wvMin;
                    parent.addClass('error');   
                }
                else if( element.hasClass('ng-invalid-maxlength') ){
                    target.html(attrs.wvMax);   
                    attrs.wvCur = attrs.wvMax;
                    parent.addClass('error');
                }
                else if( element.hasClass('ng-invalid') ){
                    target.html(attrs.wvErr);
                    attrs.wvCur = attrs.wvErr;
                    parent.addClass('error');   
                }
                else{
                    target.html(attrs.wvDef);
                    attrs.wvCur = attrs.wvDef;
                    parent.removeClass('error');    
                }
            });

            element.focus(function(){
                attrs.tooltip = attrs.wvCur;
                setTimeout(function(){
                    parent = element.next('.tooltip');  
                    target = parent.find('.tooltip-inner'); 
                    target.html( ( attrs.wvCur != "" ? attrs.wvCur : attrs.wvDef ) );
                    console.log()
                    if( attrs.wvCur != attrs.wvDef && attrs.wvCur != "" )
                        parent.addClass('error');
                },5);
            });
        }
    };
});

您可能会注意到tooltip它是空的，但我用它来触发其他消息。如果tooltip为空则不显示其他消息，是否存在任何方法来触发带有空工具提示值的 TB 工具提示？

4

1 回答 1

1

我不明白你为什么不使用 angular-ui 工具提示，你可以将工具提示设置为空并激活它，就像这样

<div tooltip=" " placement right></div>

在此处查看此文档

编辑

对于解决此问题的最简单方法，角带也有一些可能性，您是否尝试过像@SparoHawk 建议的哈希码？无论如何，我建议您对您的网页设计师区域说，看看周围的角度模块，他们可以使用很多解决方案，除了另一种解决方案可能是将值设置到工具提示中，将其绑定到一个数组你感兴趣的价值是这样的

<div tooltip='{{value}}'></div>

javascript

var value=["",something, something else]
var function=function(){
    if(something happens){
        $scope.value=value[0];
    }
    else if(something else happens){
        $scope.value=value[1]
    }
    else{
        $scope.value=value[2]
    }
}

var value=["",something, something else]
var function=function(){
    if(something happens){
        $scope.value=value[0];
    }
    else if(something else happens){
        $scope.value=value[1]
    }
    else{
        $scope.value=value[2]
    }
}


所以这是可能的

于 2014-03-28T16:00:26.930 回答