通过属性指令设置另一个属性指令引发双重绑定问题

嗨，咱们一步步来解决这个问题。先理清楚你的需求和遇到的问题，再给出可行的实现方案：

你的需求与背景 #

你想要简化项目中<uib-tooltip>指令的使用，核心要实现两点：

• 结合Angular Translate完成提示文本的翻译
• 支持配置更多提示框的自定义选项

你已经知道可以直接在<uib-tooltip>里用翻译过滤器{{'TRANSLATIONKEY'|translate}}，但希望能进一步简化整个应用内提示框的使用流程。

当前遇到的问题 #

当通过example-a指令给元素添加example-b属性时，因为用到了$compile，导致按钮的点击事件被绑定了两次。而且这个指令还不能用隔离作用域，否则控制器里的变更就无法生效了。

预期目标 #

实现切换属性指令时，不会出现事件双重绑定的问题。

可行的解决思路与方案 #

要解决这个问题，核心是避免对已经编译过的DOM元素重复调用$compile，同时还要保留对父作用域的访问权限。这里有几个具体的方案：

1. 给已编译元素打标记，跳过重复编译

在第一次编译完成后，给元素加一个自定义属性作为标记，后续指令执行时先检查这个标记，存在就跳过编译流程：

.directive('exampleA', ['$compile', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // 检查是否已经被该指令编译过
      if (element.attr('data-compiled-by-example-a')) return;
      
      // 添加标记，防止重复编译
      element.attr('data-compiled-by-example-a', 'true');
      
      // 添加example-b属性并编译
      element.attr('example-b', '');
      $compile(element)(scope);
    }
  };
}])

2. 利用Angular的编译钩子优化流程（Angular 1.5+适用）

如果你的项目用的是Angular 1.5及以上版本，可以用compile函数返回的post钩子，确保DOM完成初始编译后再处理，同时只编译新增的内容而非整个元素：

.directive('exampleA', ['$compile', function($compile) {
  return {
    restrict: 'A',
    compile: function(tElement) {
      // 先在模板元素上添加example-b属性
      tElement.attr('example-b', '');
      return {
        post: function(scope, element) {
          // 只编译元素的子内容，而非整个元素，避免重复绑定
          $compile(element.contents())(scope);
        }
      };
    }
  };
}])

3. 重构指令逻辑，合并功能彻底避免嵌套编译

既然example-a的作用是给元素加example-b并处理tooltip翻译，不如直接把这两个功能整合到一个指令里，完全绕开嵌套编译的问题：

.directive('smartTooltip', ['$translate', function($translate) {
  return {
    restrict: 'A',
    scope: false, // 不使用隔离作用域，继承父作用域
    link: function(scope, element, attrs) {
      // 处理翻译逻辑
      $translate(attrs.smartTooltip).then(function(translatedText) {
        element.attr('uib-tooltip', translatedText);
        // 支持自定义tooltip配置，比如位置
        element.attr('tooltip-placement', attrs.tooltipPlacement || 'top');
        // 这里可以加更多你需要的配置项，比如触发方式、延迟等
      });
      
      // 绑定点击事件（如果需要），确保只绑定一次
      element.on('click', function() {
        scope.$apply(function() {
          scope.$eval(attrs.smartTooltipClick);
        });
      });
    }
  };
}])

使用的时候直接用这个整合后的指令就行，非常简洁：

<button smart-tooltip="TRANSLATIONKEY" tooltip-placement="bottom" smart-tooltip-click="handleClick()">
  点击我
</button>

这个方案既简化了tooltip的使用流程，集成了翻译功能，又完全避免了重复编译导致的事件双重绑定问题，同时还能正常访问父控制器的作用域。

内容的提问来源于stack exchange，提问作者Mathias Latzko