我有一個非常簡單的雙頁面應用程序，當從列表頁面導航到詳細信息頁面時，由於隱藏/顯示UI組件而導致非常不同的閃爍。附件是一個屏幕截圖，您可以在轉換時看到兩個可見的UI（頂部是詳細信息UI，底部是列表UI）！使用UI導致AngularJS狀態改變導致UI閃爍
我使用的UI路由器進行導航。
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>
這是一個非常簡單的用例和我相當困惑，爲什麼會發生這種情況以及如何解決這個問題。
任何指針都會有所幫助。謝謝。
是否可以在第一個使用'views：{''：{}}'而不是第二個？ （我想除非你使用多個命名視圖，否則你不需要包裝在'views：{}'對象中）。另外，你是否使用ng-animate？ – plong0
我刪除了'views'並嘗試了，但沒有幫助。也不要在任何地方使用ng-animate。 – Abhishek
請問您可以添加您的模板代碼 – plong0