38

シングルページアプリケーションがホームページをロードし、一連のアイデアを表示したいと思います。各アイデアはアニメーション化されたフラッシュコンテナに表示され、アニメーションはアイデア間を循環するように表示されます。

アイデアは$httpを使用して読み込まれます。

$scope.flash = new FlashInterface scope:$scope,location:$location

$http.get("/competition.json")
  .success (data) ->
    $scope.flash._init data

ただし、履歴ナビゲーションとUXを活用するには、アドレスバーを更新して、$locationを使用して各アイデアの正しいURLを表示したいと思います。

$location.path "/i/#{idea.code}"
$scope.$apply()

このイベントはAngularJSコンテキスト、つまりFlashから発生するため、ここでは$applyと呼んでいます。現在のコントローラー/ビューを残し、ビューをリロードしないようにしたいと思います。ビューをリロードすると、フラッシュオブジェクト全体が破棄され、プリローダーサイクルが再開されるため、これは非常に悪いことです。

$ routeChangeStartをリッスンしてpreventDefaultを実行しようとしました：

$scope.$on "$routeChangeStart", (ev,next,current) ->
  ev.preventDefault()
$scope.$on "$routeChangeSuccess", (ev,current) ->
  ev.preventDefault()

しかし、役に立たない。$ location.pathを変更したときにビューのリロードをオーバーライドする方法を理解できれば、すべてが厄介なことになります。

私はまだAngularJSの周りをとても感じているので、目標を達成するためにアプリを構築する方法についてのアドバイスをいただければ幸いです。

4

7 に答える 7

93

パスを更新する代わりに、クエリパラメータをページ番号で更新するだけです。

クエリパラメータの変更を無視するようにルートを設定します。

....
$routeProvider.when('/foo', {..., reloadOnSearch: false})
....

そしてあなたのアプリのアップデート$locationで：

...
$location.search('page', pageNumber);
...
于 2012-09-18T16:29:02.427 に答える
31

このブログ投稿から：

デフォルトでは、すべての場所の変更はルーティングプロセスを経て、角度ビューが更新されます。

ただし、これを短絡する簡単な方法があります。Angularは場所の変更を監視します（場所バーに入力するか、リンクをクリックするか、から場所を設定することで達成されるかどうか $location.path()）。この変更を検知すると、イベントをブロードキャストし$locationChangeSuccess、ルーティングプロセスを開始します。イベントをキャプチャし、ルートを以前の状態にリセットします。

function MyCtrl($route, $scope) {
    var lastRoute = $route.current;
    $scope.$on('$locationChangeSuccess', function(event) {
        $route.current = lastRoute;
    });
}
于 2012-09-14T17:16:09.430 に答える
3

私の解決策は、$ routeChangeStartを使用することでした。これにより、「次の」ルートと「最後の」ルートが得られ、$locationChangeSuccessのように追加の変数を必要とせずにそれらを比較できます。

next.params.yourproperty利点は、「/ property / value」URLスタイルを使用しているときのように、「next」ルートと「last」ルートの両方で「params」プロパティにアクセスできることです。もちろん、それに応じてURLを使用$location.urlまたは$location.path変更することもできます。 $location.search()「？property=value」URLスタイル。

私の場合、それだけでなく、ルートが変更されないようにするために使用しました。コントローラーは変更されませんでした。

$scope.$on('$routeChangeStart',function(e,next,last){
  if(next.$$route.controller === last.$$route.controller){
    e.preventDefault();
    $route.current = last.$$route;
    //do whatever you want in here!
  }
});

個人的には、AngularJSがそれを制御する方法を提供する必要があると感じています。現在、ブラウザーの場所を変更するたびにルートを変更することを想定しています。

于 2014-02-11T10:43:13.220 に答える
1

依存性注入を介してロード$locationし、以下を使用する必要があります。

$scope.apply(function () {
    $location.path("yourPath");
}

を使用している間はハッシュタグ（＃）を使用しないでください$location.path。これは、HTML5モードの互換性のためです。

于 2012-09-15T12:16:12.873 に答える
0

$ locationChangeSuccessイベントは少しブルートフォースアプローチですが、パスをチェックすると、ルートパステンプレートが変更されていない場合はページの再読み込みを回避できますが、別のルートテンプレートに切り替えるとページが再読み込みされます。

var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (event) {
    if (lastRoute.$$route.originalPath === $route.current.$$route.originalPath) {
        $route.current = lastRoute;
    }
});

そのコードを特定のコントローラーに追加すると、リロードがよりインテリジェントになります。

編集：これにより少し簡単になりますが、見栄えの良いURLを維持するために書いていたコードの複雑さは最終的には気に入らなかった。結局、私は検索パラメーターに切り替えただけで、Angularはそれをはるかにうまく処理します。

于 2014-03-24T15:57:19.507 に答える
0

私はこれを行う必要がありましたが、イベントを機能させるためにイベントを取得しようと大騒ぎした後、を使用$locationChange~して実際にこれを実行できることを学びました。routeresolve

$routeProvider.when(
    '/page',
    {
        templateUrl : 'partial.html',
        controller : 'PageCtrl',
        resolve : {
            load : ['$q', function($q) {
                var defer = $q.defer();

                if (/*you only changed the idea thingo*/)
                    //dont reload the view
                    defer.reject('');
                //otherwise, load the view
                else
                    defer.resolve();

                return defer.promise;
            }]
        }
    }
);
于 2015-12-14T03:07:21.317 に答える
0

AngularJS V1.7.1では、構成オプション$routeのサポートが追加されています。reloadOnUrl

route /foo/:idhas reloadOnUrl= falsesetの場合、から/foo/id1に移動/foo/id2するとイベントのみがブロードキャストされ$routeUpdate、ビューをリロードしてコントローラーを再インスタンス化することはありません。

于 2020-01-13T00:29:08.330 に答える