4

Angular でルートを処理する簡単なソリューションを探しています。

サーバーによって生成されたページは、単純な Google マップと、3 つの別個のコントローラーにある小さなロジックを備えています。

今、私はこれの中にルーティングをフックしたいと思います。シンプルなルーティングのみ。マップを移動して新しい座標を取得すると、それらを現在の URL にパラメーター "?position=10.11,50.23" としてプッシュします。ハッシュバン バックアップでヒストリ プッシュ状態を使用したい。

アプリケーションの他の部分では、このパラメーターの変更をリッスンしたいと思います ($watch でしょうか?)。そして、ページが最初にロードされたときに使用される変更を検出するために同じコードを使用したいと考えています。

以前のプロジェクトで CanJS を使用しましたが、これは非常に単純でしたが、Angular では、結果を修正するための赤ちゃんの一歩を踏み出すことはできません :)

PS: これは最小限のユースケースの一部です。

ありがとう

4

2 に答える 2

4

それを行うために、角度のあるルーティングは実際には必要ありません。angular でのルーティングは通常ng-view、別のテンプレートに置き換えるために使用されますが、他のものにも使用できます。

$locationサービスを使用して以下を設定することで、要件を満たすことができます$watch。

$scope.$watch(function () { return $location.search().position; }, function (newVal) {
  $scope.params = newVal || 'No params';
});

$scope.setParams = function (val) {
  $location.search('position', val);
};

ワーキングデモ

別のウィンドウでライブ プレビューを起動して、ウィンドウのアドレス バーでパラメーターの変更を確認します。

更新:デモは plkr.co で動作しなくなりました。おそらく、組み込みモードの使用方法を変更したためです。

于 2013-11-27T22:46:13.903 に答える
2

CanJS はわかりませんが、Angular でもかなり簡単です。

最初の使用: $location.search({parameter1:'someValue', parameter2: 'someOtherValue'})URL を設定するには -- 履歴は自動的に更新されます。

$locationChangeStart次に、URL の変更を検出する最も洗練された方法は、次のように 2 つの組み込みイベント (のいずれか) を使用する $locationChangeSuccessことです。

    $scope.$on("$locationChangeStart", function (event, next, current) {
        // your staff goes here
    });
    $scope.$on("$locationChangeSuccess", function (event, next, current) {
        // or here (or both if needed)
    });

検索パラメータを取得するに$location.search()は、上記のメソッドのいずれかを使用してください。

于 2013-11-27T22:53:20.570 に答える