使用TinyMCE时动态内容锚点跳转功能失效问题求助

这个问题我在AngularJS项目里踩过坑！核心原因是AngularJS的路由机制会默认拦截所有带#的URL变化，把它们当成路由跳转请求，而不是页面内的锚点定位。第一次点击有效是因为页面刚加载完成时，Angular还没完全接管hash的处理逻辑，后续点击就被它拦截了，导致锚点跳转失效。

下面是具体的解决步骤，分两种场景覆盖你的需求：

一、基础解决方案（未启用HTML5模式） #

1. 配置$anchorScrollProvider #

在你的Angular模块配置中，调整锚点滚动的行为，让Angular识别页面内的锚点而非路由：

angular.module('yourAppModule', [])
  .config(['$anchorScrollProvider', function($anchorScrollProvider) {
    // 禁用自动滚动，避免Angular默认的路由干扰
    $anchorScrollProvider.disableAutoScrolling();
    // 可选：如果页面有固定导航栏，设置滚动偏移量（比如导航栏高度60px）
    $anchorScrollProvider.scrollOffset(60);
  }]);

2. 自定义指令拦截锚点点击 #

创建一个指令，手动处理锚点链接的点击事件，绕开Angular的路由拦截：

angular.module('yourAppModule')
  .directive('contentAnchorFix', ['$anchorScroll', '$location', function($anchorScroll, $location) {
    return {
      link: function(scope, element) {
        // 监听所有以#开头的锚点链接点击
        element.on('click', 'a[href^="#"]', function(e) {
          e.preventDefault(); // 阻止默认跳转行为
          // 获取锚点ID（去掉#前缀）
          const targetId = this.getAttribute('href').slice(1);
          // 更新location的hash值
          $location.hash(targetId);
          // 触发锚点滚动
          $anchorScroll();
          // 手动触发digest循环（如果需要）
          scope.$apply();
        });
      }
    };
  }]);

3. 在内容容器上应用指令 #

在展示CMS内容的HTML元素上添加这个指令，确保所有锚点点击都被正确处理：

<!-- 假设yourContentFromCMS是从后端获取的TinyMCE生成的HTML -->
<div content-anchor-fix ng-bind-html="yourContentFromCMS"></div>

二、如果启用了HTML5模式 #

如果你的项目开启了HTML5路由模式（$locationProvider.html5Mode(true)），除了上面的步骤，还要确保：

1. 在HTML头部添加<base href="/">标签，让Angular正确解析路径。
2. 服务器端配置支持HTML5模式（比如Nginx/Apache的重写规则），避免刷新页面404。
3. 同样使用上面的contentAnchorFix指令处理锚点点击，因为HTML5模式下Angular仍可能拦截hash变化。

额外检查点 #

• 确认TinyMCE生成的锚点href和对应章节的id完全匹配（大小写、空格、特殊字符都要一致），比如你的例子中#test1对应id="test1"是正确的。
• 如果页面有动态加载的内容，确保指令在内容渲染完成后再绑定事件（可以配合$timeout或者监听内容加载完成的事件）。

内容的提问来源于stack exchange，提问作者santosh kumar patro