Ich habe eine sehr einfache zwei Seiten App und beim Navigieren von der Liste Seite zur Detailseite, gibt es eine sehr deutliche Flicker verursacht durch verstecken/show der UI-Komponenten. Beigefügt ist ein Screenshot, auf dem Sie beide zum Zeitpunkt des Übergangs sichtbaren UIs sehen können (oben ist die Detail-Benutzeroberfläche und unten ist die Listen-Benutzeroberfläche)!AngularJS Zustand ändern mit UI-Router verursacht Flimmern auf UI
Ich bin mit ui-Router für die Navigation.
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()); }
Hier ist der Service-Code, der einen REST-Aufruf sendet und erzeugt eine Datenstruktur, die Steuerung verwendet.
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;
}
Hier ist der Code für die Seite 1 (Listenseite)
<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>
Und dies ist Seite 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>
Dies ist ein sehr einfacher Anwendungsfall und ich bin ziemlich verwirrt, warum dies auftritt und wie man dies löst.
Alle Zeiger helfen. Vielen Dank.
könnte es sein, dass Sie 'views: {'': {}}' in erster, aber nicht zweiter? (Ich denke, wenn Sie nicht mehrere benannte Ansichten verwenden, müssen Sie das Objekt "views: {}' nicht umbrechen. Benutzt du überhaupt ng-animate? – plong0
Ich habe 'Ansichten' entfernt und versucht, aber das hat nicht geholfen. Benutze auch nicht ng-animate. – Abhishek
können Sie bitte Ihren Vorlagecode hinzufügen – plong0