AngularJS UI Router未编译模板闪烁问题：寻求全局解决方案

我之前也碰到过这个棘手的问题——当onBefore钩子返回Promise时，UI Router会等待异步操作完成，但在等待期间目标视图的模板已经被插入DOM，导致未编译的插值表达式、初始静态内容（比如你示例里的红色文本）提前闪烁出来。下面是一个全局的修复方案，不需要逐个修改你的state配置：

核心思路 #

在任何过渡开始时（包括等待onBefore的Promise阶段），隐藏目标视图区域或显示加载状态，直到过渡完全成功/失败后再展示最终视图，从视觉上屏蔽闪烁现象。

步骤1：修改根视图容器 #

在你的根模板（比如index.html）中，给ui-view套一个容器，用来控制视图的显示状态：

<div class="ui-view-container" ng-class="{ 'transition-active': isTransitioning }">
  <div ui-view></div>
</div>

步骤2：全局监听过渡事件 #

在AngularJS的run块中，通过$transitions服务监听所有过渡的开始、成功和失败事件，更新根作用域的状态标记：

angular.module('yourAppName').run(function($rootScope, $transitions) {
  // 初始化过渡状态
  $rootScope.isTransitioning = false;

  // 过渡开始时标记为正在过渡
  $transitions.onStart({}, function() {
    $rootScope.isTransitioning = true;
    // 确保状态更新触发DOM渲染
    if (!$rootScope.$$phase) {
      $rootScope.$apply();
    }
  });

  // 过渡结束（成功/失败）时取消标记
  const endTransition = function() {
    $rootScope.isTransitioning = false;
    if (!$rootScope.$$phase) {
      $rootScope.$apply();
    }
  };

  $transitions.onSuccess({}, endTransition);
  $transitions.onError({}, endTransition);
});

步骤3：添加CSS控制视图显示 #

通过CSS在过渡期间隐藏视图，或者添加加载遮罩（推荐后者，用户体验更好）：

.ui-view-container {
  position: relative;
  min-height: 100vh; /* 根据你的布局调整 */
}

/* 过渡期间给视图添加渐隐动画 */
.ui-view-container.transition-active > [ui-view] {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* 可选：添加加载遮罩 */
.ui-view-container.transition-active::before {
  content: '加载中...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

额外优化 #

如果你希望过渡时保持旧视图直到新视图完全准备好，可以调整CSS逻辑，比如在过渡期间保留旧视图的显示，直到新视图加载完成。不过上面的方案已经能很好地解决闪烁问题。

内容的提问来源于stack exchange，提问作者Tomas Lidžius