我正在使用 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 工具提示?
最佳答案
我不明白你为什么不使用 angular-ui 工具提示,你可以将工具提示设置为空并激活它,就像这样
<div tooltip=" " placement right></div>
看看这个文档 here
编辑
对于解决这个问题的最简单方法, Angular 带也有一些可能性,你尝试过像@SparoHawk建议的哈希码吗?无论如何,我建议你对你的网页设计师区域说看看周围的 Angular 模块,他们可以使用很多解决方案,除了另一个解决方案可能是将值设置到工具提示中,将其绑定(bind)到数组您感兴趣的值是这样的
<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]
}
}
所以这是有可能的
关于javascript - 使用空值集触发 Bootstrap 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22717427/