0

私は Angular モバイル SPA アプリを作成していますが、要件の一部に大量のリスト >> 詳細ページがあります。フィルター処理してリストに入力した後、アイテムをクリックして詳細ページに移動できます (許可されている場合は crud オプションがあり、モーダルのみを使用することはできません)。関連するデータやものをサービスに保存していますが、これはスクロール位置を維持するのに役立たず、ui-router-extras のスティッキー状態が理想的なようです。関連する場合に備えて、requirejsも使用しています。また、関連する場合は kendo.dataSource にバインドされた Kendo ListView を使用しています。

私はそれを実装しましたが、正しく実行したかどうかはわかりません。下にスクロールしてリスト項目をクリックすると、詳細が表示されます。戻るボタン ( を使用するディレクティブ、使用し$window.history.back();てみ$state.goましたが同じことをしました) をクリックすると、戻って「キャッシュされた」バージョンが使用されますが、リストの一番上に表示されます。下にスクロールして別のアイテムをクリックしてから戻ると、期待どおりにスクロール位置が維持されます。

オンにする$stickyStateProvider.enableDebug(true);と、出力は最初の呼び出しから後続の呼び出しまで同じに見えます。

ここに私の状態の設定があります:

return app.config(function ($stateProvider, $stickyStateProvider, $urlRouterProvider) {
    $stickyStateProvider.enableDebug(true);
    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get("$state");
        $state.go("home");
    });
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'app/views/home.html',
        controller: 'homeController',
        controllerAs: "vm"
    })
    .state('cmmenu', {
        url: '/cmmenu',
        templateUrl: 'app/views/cmmenu.html',
        controller: 'cmmenuController',
        controllerAs: "vm"
    })
    .state('areainquiry', {
        //sticky: true,
        abstract: true,
        url: '/areainquiry',
        templateUrl: 'app/views/areainquiry.html'
    })
    .state('areainquiry.list', {
        url: '/areainquirylist',
        views: {
            'areainquirylist@areainquiry': {
                templateUrl: 'app/views/areainquirylist.html',
                controller: 'areainquirylistController',
                controllerAs: "vm"
            }
        },
        sticky: true,
        deepStateRedirect: true
    })
    .state('areainquiry.details', {
        url: '/areainquirydetails/:areaInquiryId',
        views: {
            'areainquirydetails@areainquiry': {
                templateUrl: 'app/views/areainquirydetails.html',
                controller: 'areainquirydetailsController',
                controllerAs: "vm"
            }
        }
    })
    .state('login', {
        url: '/login',
        templateUrl: 'app/views/login.html',
        controller: 'loginController',
        controllerAs: "vm"
    });
})

抽象的な親ビューである areainquiry.html は次のとおりです。

<div ui-view="areainquirylist"  ng-show="$state.includes('areainquiry.list')"></div>
<div ui-view="areainquirydetails" ng-show="$state.includes('areainquiry.details')"></div>

この画面を開くコードは次のとおりです。index.html に名前付きビューがなく、areainquiry.html までのすべてのビューがルートの名前のないビューを使用しています (「body」という名前を付けて、それを使用するようにすべて変更しましたが、うまくいきました同じ）：

<div class="col-xs-6 col-md-4">
    <a class="btn btn-default fullwidth" ui-sref="areainquiry.list">
        <span class="{{ vm.areaInquiryButtonIcon }}"></span>
        <br />
        {{ vm.areaInquiryButtonText }}
    </a>
</div>

抽象状態を使わずに、親 areainquiry と子 areainquiry.detail だけでそれを行う方法を見つけようとしていましたが、そのように機能させることができなかったので、このルートに行きました。

4

1 に答える 1

0

どうでも。それは働いています。どのように修正したかわかりません。私は別の問題（工場サービスに関係していた）に取り組んでいたので、それが修正されたと思います。

于 2015-08-21T16:04:11.927 に答える