如何将AngularJS指令的隔离作用域应用到父元素追加的模板？

你碰到的问题很典型——当你把模板追加到指令元素的父节点时，默认情况下这个新模板不会和指令的隔离作用域绑定，因为你之前的代码错误地编译了指令自身的元素，而不是新创建的按钮。下面给你两种可行的解决方案：

方案一：直接编译新模板并绑定隔离作用域 #

这是最直接的修复方式，核心是把你要追加的按钮模板用指令的隔离作用域编译后再插入父元素：

app.directive("mydirective", ['$compile', function($compile) {
  function link(scope, element, attrs, ctrl, $transclude) {
    var actionBtnHTML = `<button type="submit" ng-show="show">提交</button>`;
    // 把HTML字符串转为Angular可处理的jqLite元素
    var btnElement = angular.element(actionBtnHTML);
    // 用指令的隔离作用域编译这个按钮（关键！）
    $compile(btnElement)(scope);
    // 再将编译好的按钮追加到父元素
    element.parent().append(btnElement);

    // 可选：监听销毁事件，避免内存泄漏
    scope.$on('$destroy', function() {
      btnElement.remove();
    });
  }
  return {
    restrict: 'A',
    scope: {},
    link: link,
    controller: ['$scope', function MyDirectiveController($scope) {
      $scope.show = true;
    }]
  }
}]);

这里的关键是$compile(btnElement)(scope)——这里的scope就是指令的隔离作用域，编译完成后，按钮的ng-show="show"就会正确绑定到控制器里的show属性了。

方案二：使用transclude（适合模板可提前定义的场景） #

如果你的按钮模板不需要动态生成，也可以用Angular的transclude特性来实现，它会自动帮你把内容和隔离作用域绑定：

app.directive("mydirective", ['$compile', function($compile) {
  function link(scope, element, attrs, ctrl, $transclude) {
    // 使用$transclude获取绑定了隔离作用域的内容克隆
    $transclude(scope, function(clone) {
      element.parent().append(clone);
    });
  }
  return {
    restrict: 'A',
    scope: {},
    transclude: true, // 开启transclude
    link: link,
    controller: ['$scope', function MyDirectiveController($scope) {
      $scope.show = true;
    }]
  }
}]);

对应的HTML使用方式：

<!-- 把按钮放到指令元素内部 -->
<div mydirective>
  <button type="submit" ng-show="show">提交</button>
</div>

这种方式更符合Angular的设计思想，transclude会保留指令内部的内容，并将其绑定到指令的隔离作用域，再通过回调函数把克隆后的元素插入到你想要的位置。

额外注意事项 #

• 移除无用的编译：你之前代码里的$compile(element)(scope)是多余的，指令元素本身已经被Angular编译过了，重复编译可能导致意外问题，建议删掉。
• 内存泄漏防范：如果你的指令会被频繁创建和销毁（比如在路由切换、列表刷新场景），一定要在$destroy事件里移除追加的元素，避免DOM节点和作用域残留。

内容的提问来源于stack exchange，提问作者Alexandre D.