如何使用 AngularJS 在禁用按钮上启用引导工具提示？答案

【问题标题】：How to enable Bootstrap Tooltip on disabled button using AngularJS?如何使用 AngularJS 在禁用按钮上启用引导工具提示？
【发布时间】：2017-03-02 01:07:16
【问题描述】：

我需要在禁用的按钮上显示一个工具提示，如果使用 AngularJS 启用它，则将其删除。

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

假设您使用的是 angular-ui-bootstrap：

http://plnkr.co/edit/vA7sizeDWwyC7KxeuGel?p=preview

<body ng-controller="MainCtrl" ng-app="plunker">
  <div style="height:100px"></div>
  <div uib-tooltip="asdsad" tooltip-enable="disableButton" style="display:inline-block">
    <button ng-disabled="disableButton" ng-style="{'pointer-events':disableButton ? 'none' : ''}">Hover over me!</button>
  </div>
  <br>Check the checkbox to disable the button <input type="checkbox" ng-model="disableButton">
</body>

【讨论】：

更新了 fiddle 以在 chrome 上工作 - 为按钮添加了一个包装 div 元素@ErtuğrulAltınboğa

【解决方案2】：

您可以使用这些属性来启用/禁用工具提示

$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable')  // (Re-)enable tooltips

现在你可以使用类似的东西

$('[rel=tooltip]').tooltip('if button active' ? 'disable' :'enable')

现在用角度来做这一切只需创建一个 $scope.btnValid 变量（如果使用 angularjs 1）并将其传递给 ng-disabled 属性。这个值会根据你的需要从一些函数中改变

现在只需使用此值来启用/禁用您的工具提示，就像这样

$('[rel=tooltip]').tooltip($scope.btnValid ? 'disable' :'enable')

希望对你有帮助

【讨论】：

【解决方案3】：

你可以试试下面的代码，

        <div class="tooltip-wrapper" ng-repeat="item in itemDetails" title="
          {{item.name + (isDisabled(item.name)?' is not available' : '')}}">
         <button ng-disabled="isDisabled(item.name)" class="btn btn-primary" 
           ng-click="select(item)">{{item.name}}</button>
       </div>

演示：http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview

【讨论】：