私は非常に単純な2ページのアプリケーションを持っており、リストページから詳細ページに移動するとき、UIコンポーネントの隠れ/表示に起因する非常に明瞭なちらつきがあります。接続時には、移行時に両方のUIが表示されるスクリーンショットが表示されます（上部は詳細UI、下部はリストUI）。ui-routerを使用した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：{'' {{}}'を最初の1つではなく2番目で使うことができますか？ （複数の名前付きビューを使用しない限り、 'views :: {}'オブジェクトをラップする必要はありません）また、ng-animateを使っていますか？ – plong0
私は 'views'を削除してみましたが、それは助けになりませんでした。どこでもng-animateを使用しないでください。 – Abhishek
テンプレートコード – plong0