Angular指令中ng-click仅触发一次的问题排查与解决

我来帮你梳理并解决这个问题！你遇到的情况是自定义<go>指令首次点击正常，但后续点击会触发页面重载，ng-click不再生效，核心原因有两个：一是替换内容后新的<go>指令没被Angular重新编译，二是空href触发了页面默认跳转行为。

原问题代码 #

HTML结构 #

<div id="uiMain" class="container">
  Go to <go target="block01">01</go>, <go target="block02">02</go> or <go target="block03">03</go>
</div>
<div id="block01" class="block">
  Go to <go target="block02">02</go> or <go target="block03">03</go>
</div>
<div id="block02" class="block">
  Go to <go target="block01">01</go> or <go target="block03">03</go>
</div>
<div id="block03" class="block">
  Go to <go target="block01">01</go> or <go target="block02">02</go>
</div>

原自定义指令 #

.directive('go', function() {
  return {
    restrict: "E",
    scope: { target: "@" },
    transclude: true,
    template: '<a href="" ng-click="displayBlock(\'{target}\')"><ng-transclude></ng-transclude></a>',
    link: function (scope, element, attrs) {
      scope.displayBlock = function() {
        // 获取目标区块内容
        var content = angular.element(document.querySelector("#"+attrs.target));
        // 获取主容器
        var mainContainer = angular.element(document.querySelector("#uiMain"));
        // 替换内容
        if (content !== null) {
          mainContainer.html(content.html());
        }
      };
    }
  };
});

问题根源分析 #

1. 未重新编译DOM：当你用mainContainer.html(content.html())替换内容后，新插入的<go>标签只是普通HTML，没有被Angular编译，所以里面的ng-click不会绑定到作用域函数，自然无法触发。
2. 空href触发页面跳转：<a href="">会触发浏览器默认的页面重载行为，这也是后续点击时ng-click失效的直接诱因。

解决方案 #

方案一：修复指令并添加编译逻辑 #

这个方案基于你原本的思路，解决两个核心问题：

.directive('go', function($compile) {
  return {
    restrict: "E",
    scope: true,
    transclude: true,
    // 用javascript:void(0)阻止默认跳转
    template: '<a href="javascript:void(0)" ng-click="displayBlock()"><ng-transclude></ng-transclude></a>',
    link: function (scope, element, attrs) {
      scope.displayBlock = function() {
        var content = angular.element(document.querySelector("#"+attrs.target));
        var mainContainer = angular.element(document.querySelector("#uiMain"));
        
        if (content != null) {
          mainContainer.html(content.html());
          // 编译新插入的DOM内容，绑定父作用域确保指令生效
          $compile(mainContainer.contents())(scope.$parent);
        };
      };
    }
  };
});

方案二：更简洁的数据驱动方案（推荐） #

这个方案参考了Aditya Bhave的思路，用Angular的ng-include和作用域变量来切换内容，完全避免手动DOM操作，更符合Angular的设计思想：

1. 添加控制器

.controller('MainCtrl', function($scope) {
  // 默认显示第一个区块
  $scope.activeBlock = 'block01';
  
  $scope.switchBlock = function(targetId) {
    $scope.activeBlock = targetId;
  };
})

2. 修改HTML结构

<div id="uiMain" class="container" ng-controller="MainCtrl">
  <!-- 通过ng-include动态加载目标区块 -->
  <div ng-include="'#' + activeBlock"></div>
</div>
<!-- 给区块添加ng-non-bindable避免提前编译 -->
<div id="block01" class="block" ng-non-bindable>
  Go to <go target="block02">02</go> or <go target="block03">03</go>
</div>
<div id="block02" class="block" ng-non-bindable>
  Go to <go target="block01">01</go> or <go target="block03">03</go>
</div>
<div id="block03" class="block" ng-non-bindable>
  Go to <go target="block01">01</go> or <go target="block02">02</go>
</div>

3. 简化指令

.directive('go', function() {
  return {
    restrict: "E",
    scope: { target: "@" },
    transclude: true,
    template: '<a href="javascript:void(0)" ng-click="switchBlock(target)"><ng-transclude></ng-transclude></a>'
  };
});

这个方案通过数据驱动视图，代码更简洁，也避免了手动DOM操作带来的各种问题，是更推荐的实现方式。

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