使用ui-router导致AngularJS状态更改导致UI上的闪烁

Question

我有一个非常简单的两页应用程序，当从列表页面导航到详细信息页面时，由于隐藏/显示UI组件而导致非常明显的闪烁。附件是一个屏幕截图，您可以看到转换时可见的两个UI（顶部是详细信息UI，底部是列表UI）！

我正在使用ui-router进行导航。

function routingConfig($stateProvider, $urlRouterProvider, $locationProvider, applicationPathProvider) { $stateProvider .state('activities', { url: applicationPathProvider.getBase(), views: { '': { templateUrl: '/js/activity/activityList.partial.html', controller: 'ActivityListController', controllerAs: 'activityListController', resolve: { activitiesResponse: function(activityListService) { return activityListService.listActivities(); } }, ncyBreadcrumb: { parent: '', label: 'Activity List' } } } }) .state('activityDetails', { url : applicationPathProvider.getPath('activityDetails'), templateUrl : '/js/activity/activityDetails/activityDetails.partial.html', controller : 'ActivityDetailsController', controllerAs: 'activityDetailsController', resolve: { activityDetailsResponse: function($state, $stateParams, activityListService) { return activityListService.getTasksForActivity($stateParams.activityId); } }, ncyBreadcrumb: { parent: 'activities', label : '{{activityDetailsController.selectedActivityText}}' } }) ; $locationProvider.html5Mode(true); $urlRouterProvider.otherwise(applicationPathProvider.getBase()); }

这是发送REST调用并创建控制器使用的数据结构的服务代码。

function getTasksForActivity(activityId) {
  var deferred = $q.defer();
  Restangular.one("activities", activityId).customGET("tasks")
      .then(function (restangularTasks) {
        deferred.resolve(buildValidTasksResponse(restangularTasks.plain()));
      }, buildErrorTasksResponse);

  return deferred.promise;

}

以下是第1页（列表页面）的代码

    <div class="sl-artefact-plans" layout="row" flex>
  <div class="sl-artefact-list-container" layout="column" style="width: 100%">
    <div class='list_table'>
      <div class='list_row' ng-repeat="activity in activityListController.activities | orderBy:sortType:sortReverse">
        <div class='list_cell overflow td'>
          <a ui-sref="activityDetails({activityId: activity.id})"
             ng-click="activityListController.setSelectedActivityInService(activity)">
            {{activity.summary}}
          </a>
        </div>
        <div class='list_cell td' ng-bind="activity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'">
        </div>
        <div class='list_cell td' ng-bind="activity.status">
        </div>
      </div>
    </div>
  </div>
</div>

这是第2页：

    <div class="sl_artifact_details_header_bar">
  <div class="sl_artifact_details_heading">
    {{activityDetailsController.selectedActivityText}}
  </div>
  <div class="sl_artifact_details_info">
        <span ng-class="activityDetailsController.selectedActivityStatus"
              style="vertical-align:middle; margin:0px 0px 0px -3px">
        {{activityDetailsController.selectedActivity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'}}</span>
    <span style="padding-left: 10px">{{activityDetailsController.selectedActivity.status}}</span>
  </div>
</div>
<table>
    <tr ng-repeat="task in activityDetailsController.tasks">
        <td ng-bind="task.summary"></td>
        <td ng-bind="task.status"></td>
        <td ng-bind="task.dueBy"></td>
    </tr>
</table>

这是一个非常简单的用例，我很困惑为什么会发生这种情况以及如何解决这个问题。

任何指针都会有所帮助。感谢。