1. ホーム
  2. angularjs

[解決済み] AngularJS UI Router - 状態を再読み込みすることなくurlを変更する

2022-06-07 09:33:59

質問

現在、私たちのプロジェクトでは、デフォルトの $routeProvider を使用していますが、このハックを使って url を変更するために、このハックを使用しています。

services.service('$locationEx', ['$location', '$route', '$rootScope', function($location, $route, $rootScope) {
    $location.skipReload = function () {
        var lastRoute = $route.current;
        var un = $rootScope.$on('$locationChangeSuccess', function () {
            $route.current = lastRoute;
            un();
        });
        return $location;
    };
    return $location;
}]);

で、その中に controller

$locationEx.skipReload().path("/category/" + $scope.model.id).replace();

を置き換えることを考えています。 routeProviderui-router を使用することで、ルートのネストを行うことができますが、これを ui-router .

と同じことが可能でしょうか。 angular-ui-router ?

なぜこれが必要なのでしょうか? 例を挙げて説明しましょう。

新しいカテゴリを作成するためのルートは /category/new の後に clicking をSAVEで表示します。 success-alert を表示し、ルートを変更したい /category/new/caterogy/23 (23 - は DB に保存されている新しいアイテムの ID)

どのように解決するのですか?

単純に $state.transitionTo の代わりに $state.go . $state.go コール $state.transitionTo を内部で呼び出しますが、オプションは自動的に { location: true, inherit: true, relative: $state.$current, notify: true } . を呼び出すことができます。 $state.transitionTo を設定し notify: false . 例えば

$state.go('.detail', {id: newId}) 

は、次のように置き換えることができます。

$state.transitionTo('.detail', {id: newId}, {
    location: true,
    inherit: true,
    relative: $state.$current,
    notify: false
})

編集:fraczによって提案されたように、それは単にすることができます。

$state.go('.detail', {id: newId}, {notify: false})