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

這是我的指令如何看待角側:

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工具提示?

+0

嘗試使用'」 012的值「'而不是空字符串'」「'。 – SparoHawk

+0

@SparoHawk nop,沒有工作 – ReynierPM

回答

1

我不明白,爲什麼你不使用角度的UI提示,您可以設置提示爲空並激活它,像這樣

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

看看這個文件here

編輯

角度帶也有一些可能性,以最簡單的方式來解決這個問題,你有沒有嘗試像@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] 
    } 
} 


所以這是一個方法可行

+0

我沒有這樣做,是一個網頁設計師,我只是想幫助他解決這個問題,是的,他們可以使用AngularUI,但他們並沒有在60%可能會改變它不是一個選項,任何其他的建議? – ReynierPM