0

私の問題は、ページの読み込み時に、 $routeChangeSuccess イベントが発生したときに AJAX から受信したデータの準備ができていない可能性があることです。つまり、イベント ハンドラーと AJAX の間に競合状態があります。

ページの読み込み時にイベントが発生したときに、このデータが確実に存在するようにするにはどうすればよいですか。

ここに問題を示すフィドルがあります: http://jsfiddle.net/ajrt4/3/

私のシナリオ: $httpAJAX 呼び出しによって受信されたデータが取り込まれる選択ボックスがあります。この選択ボックスは、ナビゲーションに使用され、ユーザーが選択して移動できる一連のルートを表します。選択ボックスでは、選択されたオプションが常に現在のルートを反映している必要があるため$routeChangeSuccess、ユーザーがブラウザーの [戻る] ボタンと [進む] ボタンを使用したときに、イベントのイベント ハンドラーを使用して、選択されたドロップダウンを変更します。

コントローラーにあるものの例を次に示します。

$http.get('getData').success(function(data) {
    // Sets the dropdown menu data
    $scope.data = data;
});

$scope.$on("$routeChangeSuccess", function(event, currentRoute){
    // Set the selected option here based off the route
    if (typeof $scope.selected == 'undefined') {
        for (var i = 0; i < $scope.data.length; i++) {
            if ($scope.data[i].name == $routeParams.name) {
                $scope.selected = $scope.data[i]; // sets the current selection based off the route parameter
                return;
            }
        }
    }
});

意見：

<select ng-model="selected" ng-options="option as option.name for option in data"></select>

受信したデータは一度だけロードする必要があるため、これは別のコントローラーとビューで使用されるため、resolve使用する必要はありません。$routeProviderこれは、イベント ハンドラーで AJAX 呼び出しをネストせず、重複してデータを取得しないことも意味します。これを解決できると思うのは、Angular の$qpromise API を使用することですが、その方法はわかりません。

4

1 に答える 1

0

Angular やイベントが最も正しい方法ではないかもしれませんが、これらのシナリオで私が通常行うことは、イベント ハンドラー登録コードを .then ブロックに入れることです。あなたの場合、 $http サービスが約束を返す場合、次のことができます

$http.get('getData').then(function(data) {
    // Sets the dropdown menu data
    $scope.data = data;
    $scope.$on("$routeChangeSuccess", function(event, currentRoute){
    ...
    }
});

しかし、再び... あなたは事実上同じである成功を使用しています。問題は、ハンドラー登録を成功ブロック内に配置しない理由です。

于 2014-06-25T12:57:38.107 に答える