Angular UI Tooltip悬停时触发其他按钮ng-disabled方法异常

当你使用UI Bootstrap的tooltip组件时，tooltip的显示/隐藏过程会频繁触发AngularJS的digest循环。而你的ng-disabled绑定的是一个函数vm.testDisabled()，Angular在每次digest循环中都会执行这个函数，用来判断值是否发生变化——这就是为什么鼠标悬停时控制台会持续输出日志的核心原因。

解决这个问题的关键是避免在ng-disabled中直接绑定函数，转而将状态值存储在变量中，让Angular只监听变量的变化，而非每次都执行函数。

方法1：使用变量存储状态（推荐） #

修改控制器，把testDisabled的结果赋值给一个变量，模板中直接绑定这个变量即可：

angular.module('rgh').controller('CourseController', CourseController);

function CourseController () {
  var vm = this;
  // 初始化状态，只执行一次函数
  vm.isSearchDisabled = testDisabled();

  function testDisabled() {
    console.log('testDisabled called');
    return false;
  }

  // 如果后续需要动态更新禁用状态，在合适的时机重新赋值即可
  // 例如：vm.isSearchDisabled = testDisabled();
}

对应模板修改为：

<button type="button" uib-tooltip="new item"> new item </button>
<button ng-disabled="vm.isSearchDisabled"> search </button>

这样testDisabled只会在初始化（或你手动触发更新时）执行一次，不会因为tooltip的digest循环被反复调用。

方法2：使用一次性绑定（适合状态固定的场景） #

如果testDisabled的结果是固定不变的，可以用AngularJS的一次性绑定语法::，让Angular仅执行一次函数，之后不再监听变化：

<button type="button" uib-tooltip="new item"> new item </button>
<button ng-disabled="::vm.testDisabled()"> search </button>

注意：这种方式只适用于状态不会动态改变的场景，如果之后需要更新按钮的禁用状态，这个方法就不适用了。

内容的提问来源于stack exchange，提问作者Rasool Ghafari