6

フロントエンドでいくつかのルーティングを処理するために角度のある ui ルーターを使用しています。これは私のルーティングコードがどのように見えるかです。

// angular config

$stateProvider.state('app', {
    templateUrl: '/static/partials/home.html',
    controller: 'NavCtrl'
});

$stateProvider.state('app.reader', {
    url : '/reader/*path?start&end&column&page',
    templateUrl: '/static/partials/reader.html',
    resolve : {
        panelContent : [
            '$state', '$stateParams', '$http',
            function ($state, $stateParams, $http) {
                alert('resolving panel Content');
                return [];  // simplest thing possible to illustrate my point
            }
        ]
    },
    controller: 'ReaderCtrl'
});

/// etc etc

$urlRouterProvider.otherwise('/reader/');

私のhtmlは複数のネストされたビューを利用しています。できる限り説明しようと思います

index.html

<html>
    <div ui-view></div>     <!-- /static/partials/home.html gets injected here -->
</html>

/static/home.html

<html>
    <!-- some side bar stuff -->

    <!-- reader -->
    <div ui-view></div>    <!-- /static/partials/reader.html gets injected here -->
</html>

そのため、複数レベルのネストが進行中です

-- index.html
    -- home.html
        -- reader.html

ここで、初めてページをロードすると、警告メッセージが表示されます

alert('resolving panel Content');

一度だけ発火します..それは理にかなっています。ただし、ページネーション内の「次のページ」をクリックするとします..

<!-- inside /static/partials/reader.html -->   

<uib
    pagination total-items= "totalItems"
    ng-model= "pageNumber"
    ng-change= "pageUpdate"
    max-size= "maxPageNumbersDisplayed"
></uib>

これにより、最終的に「ReaderCtrl」内の関数が起動します

$scope.pageUpdate(page) {
    $state.go( '.', {page: page}); 
}

これにより、URLが更新され、次のようになります

/#/reader/<my path>

このようなものに

/#/reader/<my_path>?page=2

さて、私が髪を引き裂く部分について。

ルーティングのリーダー セクションの「解決」コード ブロックに戻ります。

警告メッセージが 2 回表示されます。

Web コンソールで少しデバッグを行ったところ、順序が正しいことがわかりました。

 1) alert message in resolve
 2) travel through the entirety of ReaderCtrl
 3) lots and lots of angular calls
 4) alert message (2nd time)
 5) travel through entirety of ReaderCtrl a second time.

NavCtrl で何が起こっているのかを知りたいと思うかもしれませんが、私はそこに呼び出しを行っていません。NavCtrl にあるのは、/static/partials/home.html のスコープを更新するために、ReaderCtrl が継承できる関数だけです。

本当に、ここでステップ 3 に行き詰まっているように見えます。

私の解決ブロックが2回起動しているように見える理由について、誰か考えがありますか?

編集：

もう少しデバッグした後、「updatePage」関数が実行された直後から、順序が次のようになることがわかったようです。

1) first "resolving message"
    -- the url has not yet changed
2) second "resolving message"
    -- the url appears to have changed very shortly before this message

だから、私は今私の質問だと思います...なぜ

$state.go('.', args);

最初のアラートが発生する前に URL を変更しないで、2 番目のアラートまたはその近くで URL を変更しますか?

編集2：私の問題を解決することができなかったので、当分の間それをハッキングしました...私は本質的に、 $state.go() が舞台裏で行っていると想定していることを行う関数を作成し、 URL。

function _mk_url(args) {

    var url = "/reader";

    var pageNumber = args.pageNumber || 1;
    url += "?page=" + pageNumber;

    var columns = args.columns || [];
    columns.forEach(function(d) {
        url += "&column=" + d;
    });

    //etc..

    return url;
}

var args = {"columns" : ["a", "b", "c"], "pageNumber" : 2};
var url = _mk_url(args);
$location.url(url);
4

3 に答える 3

1

私はこの問題を抱えていましたが、解決関数をコードの別の場所で手動で呼び出していたことが原因であることがわかりました。コードを検索するpanelContent()と、再びトリガーされている場所が見つかる場合があります。

于 2016-04-28T23:16:52.373 に答える