当元素被禁用时动态禁用工具提示

时间:2013-05-14 03:08:53

标签: angularjs angularjs-directive single-page-application

我正在尝试阻止Twitter引导工具提示在元素被禁用时显示。我可以使用以下代码执行此操作:

app.directive("tooltip",function(){
    return {
          restrict:"A",
          require: 'tooltipDirection',
          link:function(scope,element,attrs,directionController){

               attrs.$observe('ngDisabled',function(){


                   console.log("ngDisabled has changed: " + attrs.ngDisabled);

               });                  

               if(scope.$eval(attrs.ngDisabled)!=true){

                 $(element).attr('title',attrs.tooltip).tooltip({placement:directionController.direction});
               }
           }
     };

});

但是,这仅在页面加载且元素已被禁用时才有效。我需要一种动态禁用工具提示的方法。例如,如果我单击一个更改范围变量(editing_bln)值的按钮(编辑),则第二个按钮按钮(保存)将通过ngDisabled和范围变量editing_bln禁用。我现在也想要禁用工具提示 - 但事实并非如此。我尝试使用attrs。$ observe在链接函数中,当页面加载时也会调​​用,而不是在变量editing_bln更改时调用。这是按钮代码:

<button type="button" ng-class="{'btn-danger':editing_bln}" class="btn btn-mini" style="margin-top:10px;margin-left:20px;" ng-click="editing_bln = !editing_bln"><i tooltip-direction="top" tooltip="Click to Edit Content" ng-class="{'icon-white':editing_bln}" class="icon-pencil"></i></button>

<button ng-disabled="editing_bln" type="button" class="btn btn-mini" style="margin-top:10px;" ng-click="responseAdd()"><i tooltip-direction="top" tooltip="Add response to group."  class="icon-plus"></i></button>

我猜我错过了链接功能中的标记。感谢您的回复。

1 个答案:

答案 0 :(得分:1)

您可以尝试做的是将工具提示触发器设置为无法识别的触发器,这实际上导致工具提示根本不会触发:

<button ng-disabled="editing_bln" type="button" class="btn btn-mini" 
        style="margin-top:10px;" ng-click="responseAdd()">
    <i tooltip-direction="top" tooltip="Add response to group." 
       tooltip-trigger={{ editing_bln ? 'none' : 'mouseenter'}}" 
       class="icon-plus"></i>
</button>